@ebay/skin 17.1.0 → 17.2.0-next.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 (193) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/chilled-dots-whisper.md +5 -0
  3. package/.changeset/config.json +11 -0
  4. package/.changeset/five-bats-appear.md +5 -0
  5. package/.changeset/gentle-moles-collect.md +5 -0
  6. package/.changeset/healthy-kings-hang.md +5 -0
  7. package/.changeset/pre.json +17 -0
  8. package/.changeset/pretty-rabbits-smash.md +5 -0
  9. package/.changeset/slow-maps-guess.md +5 -0
  10. package/.changeset/stale-lamps-retire.md +5 -0
  11. package/.changeset/unlucky-files-tickle.md +5 -0
  12. package/.github/workflows/jekyll-gh-pages.yml +53 -9
  13. package/CHANGELOG.md +28 -0
  14. package/CONTRIBUTING.md +28 -0
  15. package/_cdn/skin/v17.2.0-next.0/skin-default.min.css +69 -0
  16. package/_cdn/skin/v17.2.0-next.0/skin-full.min.css +151 -0
  17. package/_cdn/skin/v17.2.0-next.0/skin-headless.min.css +6 -0
  18. package/dist/button/button.css +0 -1
  19. package/dist/combobox/combobox.css +5 -7
  20. package/dist/date-textbox/date-textbox.css +1 -1
  21. package/dist/filter-menu/filter-menu.css +2 -2
  22. package/dist/filter-menu-button/filter-menu-button.css +7 -4
  23. package/dist/icon/icon.css +24 -0
  24. package/dist/infotip/infotip.css +3 -3
  25. package/dist/listbox/listbox.css +3 -2
  26. package/dist/listbox-button/listbox-button.css +5 -7
  27. package/dist/menu/menu.css +3 -2
  28. package/dist/menu-button/menu-button.css +5 -9
  29. package/dist/signal/signal.css +4 -3
  30. package/dist/svg/icon/icon-bank-24.svg +4 -2
  31. package/dist/svg/icon/icon-bank-64.svg +4 -2
  32. package/dist/svg/icon/icon-calendar-16.svg +4 -5
  33. package/dist/svg/icon/icon-calendar-24.svg +4 -5
  34. package/dist/svg/icon/icon-calendar-64.svg +4 -5
  35. package/dist/svg/icon/icon-credit-card-16.svg +4 -2
  36. package/dist/svg/icon/icon-credit-card-24.svg +4 -2
  37. package/dist/svg/icon/icon-credit-card-64.svg +4 -2
  38. package/dist/svg/icon/icon-gift-16.svg +2 -2
  39. package/dist/svg/icon/icon-gift-24.svg +4 -2
  40. package/dist/svg/icon/icon-gift-64.svg +4 -2
  41. package/dist/svg/icon/icon-locked-16.svg +4 -2
  42. package/dist/svg/icon/icon-locked-20.svg +7 -0
  43. package/dist/svg/icon/icon-locked-24.svg +4 -2
  44. package/dist/svg/icon/icon-mail-20.svg +7 -0
  45. package/dist/svg/icon/icon-passkey-16.svg +7 -0
  46. package/dist/svg/icon/icon-passkey-24.svg +7 -0
  47. package/dist/svg/icon/icon-passkey-64.svg +7 -0
  48. package/dist/svg/icon/icon-swap-24.svg +7 -0
  49. package/dist/svg/icon/icon-unlocked-16.svg +4 -3
  50. package/dist/svg/icon/icon-unlocked-24.svg +4 -5
  51. package/dist/svg/icon/icon-venmo-12-colored.svg +1 -0
  52. package/dist/svg/icon/icon-venmo-18-colored.svg +1 -0
  53. package/dist/svg/icon/icon-venmo-24-colored.svg +1 -0
  54. package/dist/svg/icon/icon-venmo-32-colored.svg +1 -0
  55. package/dist/svg/icons.svg +103 -42
  56. package/dist/tokens/evo-dark.css +1 -0
  57. package/dist/tokens/evo-light.css +1 -0
  58. package/dist/tooltip/tooltip.css +2 -2
  59. package/dist/tourtip/tourtip.css +2 -6
  60. package/package.json +15 -11
  61. package/scripts/develop-module_proper/code-generators/doc-generator.js +19 -13
  62. package/src/less/breadcrumbs/stories/button-cascade.stories.js +9 -9
  63. package/src/less/breadcrumbs/stories/button-overflow.stories.js +11 -11
  64. package/src/less/breadcrumbs/stories/buttons.stories.js +5 -5
  65. package/src/less/breadcrumbs/stories/link-cascade.stories.js +9 -9
  66. package/src/less/breadcrumbs/stories/link-overflow.stories.js +11 -11
  67. package/src/less/breadcrumbs/stories/links.stories.js +5 -5
  68. package/src/less/button/button.less +0 -1
  69. package/src/less/button/stories/button/base.stories.js +2 -2
  70. package/src/less/button/stories/button/borderless.stories.js +4 -4
  71. package/src/less/button/stories/button/primary.stories.js +1 -1
  72. package/src/less/button/stories/button/secondary.stories.js +1 -1
  73. package/src/less/button/stories/button/tertiary.stories.js +1 -1
  74. package/src/less/button/stories/destructive-button/primary.stories.js +1 -1
  75. package/src/less/button/stories/destructive-button/secondary.stories.js +1 -1
  76. package/src/less/button/stories/destructive-button/tertiary.stories.js +1 -1
  77. package/src/less/carousel/stories/carousel.stories.js +25 -25
  78. package/src/less/checkbox/stories/checked.stories.js +16 -16
  79. package/src/less/checkbox/stories/mixed.stories.js +2 -2
  80. package/src/less/checkbox/stories/unchecked.stories.js +8 -8
  81. package/src/less/chip/stories/interactive-chip.stories.js +17 -17
  82. package/src/less/chips-combobox/stories/chips-combobox.stories.js +34 -34
  83. package/src/less/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  84. package/src/less/combobox/stories/combobox.stories.js +10 -10
  85. package/src/less/cta-button/stories/cascade.stories.js +3 -3
  86. package/src/less/cta-button/stories/cta-button.stories.js +1 -1
  87. package/src/less/cta-button/stories/dimensions.stories.js +2 -2
  88. package/src/less/date-textbox/date-textbox.less +1 -1
  89. package/src/less/details/stories/cascade.stories.js +3 -3
  90. package/src/less/details/stories/details.stories.js +4 -4
  91. package/src/less/drawer-dialog/stories/drawer-dialog.stories.js +6 -6
  92. package/src/less/field/stories/stacked.stories.js +12 -12
  93. package/src/less/field/stories/unstacked.stories.js +4 -4
  94. package/src/less/filter-menu/stories/filter-menu.stories.js +30 -30
  95. package/src/less/filter-menu-button/filter-menu-button.less +3 -3
  96. package/src/less/filter-menu-button/stories/filter-menu-button.stories.js +83 -83
  97. package/src/less/floating-label/stories/floating-label.stories.js +5 -5
  98. package/src/less/global/stories/global.stories.js +12 -12
  99. package/src/less/icon/generated/icon.less +24 -0
  100. package/src/less/icon-button/stories/alignment.stories.js +6 -6
  101. package/src/less/infotip/infotip.less +3 -3
  102. package/src/less/infotip/stories/infotip.stories.js +10 -10
  103. package/src/less/inline-notice/stories/inline.stories.js +10 -10
  104. package/src/less/listbox/stories/cascade.stories.js +9 -9
  105. package/src/less/listbox/stories/listbox.stories.js +15 -15
  106. package/src/less/listbox-button/stories/base.stories.js +43 -43
  107. package/src/less/listbox-button/stories/cascade.stories.js +15 -15
  108. package/src/less/listbox-button/stories/dimensions.stories.js +5 -5
  109. package/src/less/listbox-button/stories/error/error.base.stories.js +38 -38
  110. package/src/less/listbox-button/stories/error/error.cascade.stories.js +15 -15
  111. package/src/less/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  112. package/src/less/listbox-button/stories/error/error.form.stories.js +10 -10
  113. package/src/less/listbox-button/stories/form.stories.js +15 -15
  114. package/src/less/listbox-button/stories/subtitle.stories.js +38 -38
  115. package/src/less/menu/stories/fake-menu.stories.js +4 -4
  116. package/src/less/menu/stories/multiSelect.stories.js +9 -9
  117. package/src/less/menu-button/stories/base.stories.js +29 -29
  118. package/src/less/menu-button/stories/cascade.stories.js +6 -6
  119. package/src/less/menu-button/stories/dimensions.stories.js +1 -1
  120. package/src/less/menu-button/stories/fake-menu-button.stories.js +6 -6
  121. package/src/less/mixins/private/dropdown-mixins.less +3 -6
  122. package/src/less/mixins/private/filter-menu-mixins.less +1 -1
  123. package/src/less/mixins/private/selection-list-mixins.less +0 -2
  124. package/src/less/page-notice/stories/page-notice.stories.js +12 -12
  125. package/src/less/page-notice/stories/test.stories.js +7 -7
  126. package/src/less/pagination/stories/button-cascade.stories.js +6 -6
  127. package/src/less/pagination/stories/buttons.stories.js +4 -4
  128. package/src/less/pagination/stories/link-cascade.stories.js +6 -6
  129. package/src/less/pagination/stories/links.stories.js +4 -4
  130. package/src/less/pagination/stories/overflow.stories.js +16 -16
  131. package/src/less/progress-spinner/stories/progress-spinner.stories.js +4 -4
  132. package/src/less/progress-stepper/stories/progress-stepper.stories.js +49 -49
  133. package/src/less/radio/stories/checked.stories.js +16 -16
  134. package/src/less/radio/stories/unchecked.stories.js +8 -8
  135. package/src/less/section-notice/stories/icon-16.stories.js +12 -12
  136. package/src/less/section-notice/stories/icon-24.stories.js +20 -20
  137. package/src/less/section-notice/stories/iconless.stories.js +4 -4
  138. package/src/less/section-notice/stories/test.stories.js +4 -4
  139. package/src/less/section-title/stories/rtl.stories.js +3 -3
  140. package/src/less/section-title/stories/section-title.stories.js +3 -3
  141. package/src/less/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  142. package/src/less/select/stories/cascade.stories.js +3 -3
  143. package/src/less/select/stories/default.stories.js +8 -8
  144. package/src/less/select/stories/floating-label.stories.js +4 -4
  145. package/src/less/signal/signal.less +4 -3
  146. package/src/less/split-button/stories/base.stories.js +12 -12
  147. package/src/less/split-button/stories/rtl.stories.js +6 -6
  148. package/src/less/split-button/stories/size.stories.js +2 -2
  149. package/src/less/star-rating/stories/star-rating.stories.js +15 -15
  150. package/src/less/star-rating-select/stories/star-rating-select.stories.js +10 -10
  151. package/src/less/textbox/stories/icon.stories.js +10 -10
  152. package/src/less/textbox/stories/rtl/icon.stories.js +7 -7
  153. package/src/less/toast-dialog/stories/toast-dialog.stories.js +3 -3
  154. package/src/less/toggle-button/stories/gallery-layout.stories.js +3 -3
  155. package/src/less/toggle-button/stories/list-layout.stories.js +3 -3
  156. package/src/less/tooltip/stories/pointer.stories.js +12 -12
  157. package/src/less/tooltip/stories/tooltip.stories.js +2 -2
  158. package/src/less/tooltip/tooltip.less +2 -2
  159. package/src/less/tourtip/stories/tourtip.stories.js +4 -4
  160. package/src/less/tourtip/tourtip.less +2 -7
  161. package/src/svg/icon/icon-bank-24.svg +4 -2
  162. package/src/svg/icon/icon-bank-64.svg +4 -2
  163. package/src/svg/icon/icon-calendar-16.svg +4 -5
  164. package/src/svg/icon/icon-calendar-24.svg +4 -5
  165. package/src/svg/icon/icon-calendar-64.svg +4 -5
  166. package/src/svg/icon/icon-credit-card-16.svg +4 -2
  167. package/src/svg/icon/icon-credit-card-24.svg +4 -2
  168. package/src/svg/icon/icon-credit-card-64.svg +4 -2
  169. package/src/svg/icon/icon-gift-16.svg +2 -2
  170. package/src/svg/icon/icon-gift-24.svg +4 -2
  171. package/src/svg/icon/icon-gift-64.svg +4 -2
  172. package/src/svg/icon/icon-locked-16.svg +4 -2
  173. package/src/svg/icon/icon-locked-20.svg +7 -0
  174. package/src/svg/icon/icon-locked-24.svg +4 -2
  175. package/src/svg/icon/icon-mail-20.svg +7 -0
  176. package/src/svg/icon/icon-passkey-16.svg +7 -0
  177. package/src/svg/icon/icon-passkey-24.svg +7 -0
  178. package/src/svg/icon/icon-passkey-64.svg +7 -0
  179. package/src/svg/icon/icon-swap-24.svg +7 -0
  180. package/src/svg/icon/icon-unlocked-16.svg +4 -3
  181. package/src/svg/icon/icon-unlocked-24.svg +4 -5
  182. package/src/svg/icon/icon-venmo-12-colored.svg +1 -0
  183. package/src/svg/icon/icon-venmo-18-colored.svg +1 -0
  184. package/src/svg/icon/icon-venmo-24-colored.svg +1 -0
  185. package/src/svg/icon/icon-venmo-32-colored.svg +1 -0
  186. package/src/svg/icons.svg +103 -42
  187. package/src/tokens/evo-dark.css +1 -0
  188. package/src/tokens/evo-light.css +1 -0
  189. package/svg.svg +103 -42
  190. package/.storybook/preview-head.html +0 -68930
  191. package/_cdn/skin/v17.1.0/skin-default.min.css +0 -69
  192. package/_cdn/skin/v17.1.0/skin-full.min.css +0 -151
  193. package/_cdn/skin/v17.1.0/skin-headless.min.css +0 -6
package/src/less/chips-combobox/stories/chips-combobox.stories.js CHANGED
@@ -6,7 +6,7 @@ export const empty = () => `
6
6
  <span class="combobox combobox--js chips-combobox__combobox">
7
7
  <span class="combobox__control chips-combobox_combobox__control">
8
8
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
9
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
9
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
10
10
  <use href="#icon-chevron-down-16"></use>
11
11
  </svg>
12
12
  </span>
@@ -33,7 +33,7 @@ export const fluid = () => `
33
33
  <span class="combobox combobox--js chips-combobox__combobox">
34
34
  <span class="combobox__control chips-combobox_combobox__control">
35
35
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
36
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
36
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
37
37
  <use href="#icon-chevron-down-16"></use>
38
38
  </svg>
39
39
  </span>
@@ -61,7 +61,7 @@ export const prefilled = () => `
61
61
  <span class="chip">
62
62
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
63
63
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
64
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
64
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
65
65
  <use href="#icon-close-12"></use>
66
66
  </svg>
67
67
  </button>
@@ -71,7 +71,7 @@ export const prefilled = () => `
71
71
  <span class="chip">
72
72
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
73
73
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
74
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
74
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
75
75
  <use href="#icon-close-12"></use>
76
76
  </svg>
77
77
  </button>
@@ -81,7 +81,7 @@ export const prefilled = () => `
81
81
  <span class="chip">
82
82
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
83
83
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
84
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
84
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
85
85
  <use href="#icon-close-12"></use>
86
86
  </svg>
87
87
  </button>
@@ -91,7 +91,7 @@ export const prefilled = () => `
91
91
  <span class="combobox combobox--js chips-combobox__combobox">
92
92
  <span class="combobox__control chips-combobox_combobox__control">
93
93
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
94
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
94
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
95
95
  <use href="#icon-chevron-down-16"></use>
96
96
  </svg>
97
97
  </span>
@@ -119,7 +119,7 @@ export const manyChips = () => `
119
119
  <span class="chip">
120
120
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
121
121
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
122
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
122
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
123
123
  <use href="#icon-close-12"></use>
124
124
  </svg>
125
125
  </button>
@@ -129,7 +129,7 @@ export const manyChips = () => `
129
129
  <span class="chip">
130
130
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
131
131
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
132
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
132
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
133
133
  <use href="#icon-close-12"></use>
134
134
  </svg>
135
135
  </button>
@@ -139,7 +139,7 @@ export const manyChips = () => `
139
139
  <span class="chip">
140
140
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
141
141
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
142
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
142
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
143
143
  <use href="#icon-close-12"></use>
144
144
  </svg>
145
145
  </button>
@@ -149,7 +149,7 @@ export const manyChips = () => `
149
149
  <span class="chip">
150
150
  <span id="chip-interactive-1-1-text" class="chip__text">Soccer</span>
151
151
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
152
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
152
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
153
153
  <use href="#icon-close-12"></use>
154
154
  </svg>
155
155
  </button>
@@ -159,7 +159,7 @@ export const manyChips = () => `
159
159
  <span class="chip">
160
160
  <span id="chip-interactive-1-1-text" class="chip__text">Hockey</span>
161
161
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
162
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
162
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
163
163
  <use href="#icon-close-12"></use>
164
164
  </svg>
165
165
  </button>
@@ -169,7 +169,7 @@ export const manyChips = () => `
169
169
  <span class="chip">
170
170
  <span id="chip-interactive-1-1-text" class="chip__text">Tennis</span>
171
171
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
172
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
172
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
173
173
  <use href="#icon-close-12"></use>
174
174
  </svg>
175
175
  </button>
@@ -179,7 +179,7 @@ export const manyChips = () => `
179
179
  <span class="chip">
180
180
  <span id="chip-interactive-1-1-text" class="chip__text">Swimming</span>
181
181
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
182
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
182
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
183
183
  <use href="#icon-close-12"></use>
184
184
  </svg>
185
185
  </button>
@@ -189,7 +189,7 @@ export const manyChips = () => `
189
189
  <span class="chip">
190
190
  <span id="chip-interactive-1-1-text" class="chip__text">Cricket</span>
191
191
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
192
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
192
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
193
193
  <use href="#icon-close-12"></use>
194
194
  </svg>
195
195
  </button>
@@ -199,7 +199,7 @@ export const manyChips = () => `
199
199
  <span class="chip">
200
200
  <span id="chip-interactive-1-1-text" class="chip__text">Table Tennis</span>
201
201
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
202
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
202
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
203
203
  <use href="#icon-close-12"></use>
204
204
  </svg>
205
205
  </button>
@@ -209,7 +209,7 @@ export const manyChips = () => `
209
209
  <span class="chip">
210
210
  <span id="chip-interactive-1-1-text" class="chip__text">Rugby</span>
211
211
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
212
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
212
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
213
213
  <use href="#icon-close-12"></use>
214
214
  </svg>
215
215
  </button>
@@ -219,7 +219,7 @@ export const manyChips = () => `
219
219
  <span class="chip">
220
220
  <span id="chip-interactive-1-1-text" class="chip__text">Boxing</span>
221
221
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
222
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
222
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
223
223
  <use href="#icon-close-12"></use>
224
224
  </svg>
225
225
  </button>
@@ -229,7 +229,7 @@ export const manyChips = () => `
229
229
  <span class="chip">
230
230
  <span id="chip-interactive-1-1-text" class="chip__text">Judo</span>
231
231
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
232
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
232
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
233
233
  <use href="#icon-close-12"></use>
234
234
  </svg>
235
235
  </button>
@@ -239,7 +239,7 @@ export const manyChips = () => `
239
239
  <span class="chip">
240
240
  <span id="chip-interactive-1-1-text" class="chip__text">Fencing</span>
241
241
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
242
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
242
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
243
243
  <use href="#icon-close-12"></use>
244
244
  </svg>
245
245
  </button>
@@ -249,7 +249,7 @@ export const manyChips = () => `
249
249
  <span class="chip">
250
250
  <span id="chip-interactive-1-1-text" class="chip__text">Volleyball</span>
251
251
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
252
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
252
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
253
253
  <use href="#icon-close-12"></use>
254
254
  </svg>
255
255
  </button>
@@ -259,7 +259,7 @@ export const manyChips = () => `
259
259
  <span class="chip">
260
260
  <span id="chip-interactive-1-1-text" class="chip__text">Golf</span>
261
261
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
262
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
262
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
263
263
  <use href="#icon-close-12"></use>
264
264
  </svg>
265
265
  </button>
@@ -269,7 +269,7 @@ export const manyChips = () => `
269
269
  <span class="combobox combobox--js chips-combobox__combobox">
270
270
  <span class="combobox__control chips-combobox_combobox__control">
271
271
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
272
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
272
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
273
273
  <use href="#icon-chevron-down-16"></use>
274
274
  </svg>
275
275
  </span>
@@ -297,7 +297,7 @@ export const expanded = () => `
297
297
  <span class="chip">
298
298
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
299
299
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
300
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
300
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
301
301
  <use href="#icon-close-12"></use>
302
302
  </svg>
303
303
  </button>
@@ -307,7 +307,7 @@ export const expanded = () => `
307
307
  <span class="chip">
308
308
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
309
309
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
310
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
310
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
311
311
  <use href="#icon-close-12"></use>
312
312
  </svg>
313
313
  </button>
@@ -317,7 +317,7 @@ export const expanded = () => `
317
317
  <span class="chip">
318
318
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
319
319
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
320
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
320
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
321
321
  <use href="#icon-close-12"></use>
322
322
  </svg>
323
323
  </button>
@@ -327,7 +327,7 @@ export const expanded = () => `
327
327
  <span class="combobox combobox--js combobox--expanded chips-combobox__combobox">
328
328
  <span class="combobox__control chips-combobox_combobox__control">
329
329
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
330
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
330
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
331
331
  <use href="#icon-chevron-down-16"></use>
332
332
  </svg>
333
333
  </span>
@@ -355,7 +355,7 @@ export const disabledState = () => `
355
355
  <span class="chip">
356
356
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
357
357
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
358
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
358
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
359
359
  <use href="#icon-close-12"></use>
360
360
  </svg>
361
361
  </button>
@@ -365,7 +365,7 @@ export const disabledState = () => `
365
365
  <span class="chip">
366
366
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
367
367
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
368
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
368
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
369
369
  <use href="#icon-close-12"></use>
370
370
  </svg>
371
371
  </button>
@@ -375,7 +375,7 @@ export const disabledState = () => `
375
375
  <span class="chip">
376
376
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
377
377
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
378
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
378
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
379
379
  <use href="#icon-close-12"></use>
380
380
  </svg>
381
381
  </button>
@@ -385,7 +385,7 @@ export const disabledState = () => `
385
385
  <span class="combobox combobox--js chips-combobox__combobox">
386
386
  <span class="combobox__control chips-combobox_combobox__control">
387
387
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" disabled />
388
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
388
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
389
389
  <use href="#icon-chevron-down-16"></use>
390
390
  </svg>
391
391
  </span>
@@ -413,7 +413,7 @@ export const errorState = () => `
413
413
  <span class="chip">
414
414
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
415
415
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
416
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
416
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
417
417
  <use href="#icon-close-12"></use>
418
418
  </svg>
419
419
  </button>
@@ -423,7 +423,7 @@ export const errorState = () => `
423
423
  <span class="chip">
424
424
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
425
425
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
426
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
426
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
427
427
  <use href="#icon-close-12"></use>
428
428
  </svg>
429
429
  </button>
@@ -433,7 +433,7 @@ export const errorState = () => `
433
433
  <span class="chip">
434
434
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
435
435
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
436
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
436
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
437
437
  <use href="#icon-close-12"></use>
438
438
  </svg>
439
439
  </button>
@@ -443,7 +443,7 @@ export const errorState = () => `
443
443
  <span class="combobox combobox--js chips-combobox__combobox">
444
444
  <span class="combobox__control chips-combobox_combobox__control">
445
445
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
446
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
446
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
447
447
  <use href="#icon-chevron-down-16"></use>
448
448
  </svg>
449
449
  </span>
package/src/less/chips-combobox/stories/rtl-chips-combobox.stories.js CHANGED
@@ -7,7 +7,7 @@ export const empty = () => `
7
7
  <span class="combobox combobox--js chips-combobox__combobox">
8
8
  <span class="combobox__control chips-combobox_combobox__control">
9
9
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
10
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
10
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
11
11
  <use href="#icon-chevron-down-16"></use>
12
12
  </svg>
13
13
  </span>
@@ -36,7 +36,7 @@ export const fluid = () => `
36
36
  <span class="combobox combobox--js chips-combobox__combobox">
37
37
  <span class="combobox__control chips-combobox_combobox__control">
38
38
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
39
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
39
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
40
40
  <use href="#icon-chevron-down-16"></use>
41
41
  </svg>
42
42
  </span>
@@ -66,7 +66,7 @@ export const prefilled = () => `
66
66
  <span class="chip">
67
67
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
68
68
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
69
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
69
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
70
70
  <use href="#icon-close-12"></use>
71
71
  </svg>
72
72
  </button>
@@ -76,7 +76,7 @@ export const prefilled = () => `
76
76
  <span class="chip">
77
77
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
78
78
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
79
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
79
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
80
80
  <use href="#icon-close-12"></use>
81
81
  </svg>
82
82
  </button>
@@ -86,7 +86,7 @@ export const prefilled = () => `
86
86
  <span class="chip">
87
87
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
88
88
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
89
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
89
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
90
90
  <use href="#icon-close-12"></use>
91
91
  </svg>
92
92
  </button>
@@ -96,7 +96,7 @@ export const prefilled = () => `
96
96
  <span class="combobox combobox--js chips-combobox__combobox">
97
97
  <span class="combobox__control chips-combobox_combobox__control">
98
98
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
99
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
99
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
100
100
  <use href="#icon-chevron-down-16"></use>
101
101
  </svg>
102
102
  </span>
@@ -126,7 +126,7 @@ export const manyChips = () => `
126
126
  <span class="chip">
127
127
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
128
128
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
129
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
129
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
130
130
  <use href="#icon-close-12"></use>
131
131
  </svg>
132
132
  </button>
@@ -136,7 +136,7 @@ export const manyChips = () => `
136
136
  <span class="chip">
137
137
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
138
138
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
139
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
139
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
140
140
  <use href="#icon-close-12"></use>
141
141
  </svg>
142
142
  </button>
@@ -146,7 +146,7 @@ export const manyChips = () => `
146
146
  <span class="chip">
147
147
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
148
148
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
149
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
149
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
150
150
  <use href="#icon-close-12"></use>
151
151
  </svg>
152
152
  </button>
@@ -156,7 +156,7 @@ export const manyChips = () => `
156
156
  <span class="chip">
157
157
  <span id="chip-interactive-1-1-text" class="chip__text">Soccer</span>
158
158
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
159
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
159
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
160
160
  <use href="#icon-close-12"></use>
161
161
  </svg>
162
162
  </button>
@@ -166,7 +166,7 @@ export const manyChips = () => `
166
166
  <span class="chip">
167
167
  <span id="chip-interactive-1-1-text" class="chip__text">Hockey</span>
168
168
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
169
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
169
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
170
170
  <use href="#icon-close-12"></use>
171
171
  </svg>
172
172
  </button>
@@ -176,7 +176,7 @@ export const manyChips = () => `
176
176
  <span class="chip">
177
177
  <span id="chip-interactive-1-1-text" class="chip__text">Tennis</span>
178
178
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
179
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
179
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
180
180
  <use href="#icon-close-12"></use>
181
181
  </svg>
182
182
  </button>
@@ -186,7 +186,7 @@ export const manyChips = () => `
186
186
  <span class="chip">
187
187
  <span id="chip-interactive-1-1-text" class="chip__text">Swimming</span>
188
188
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
189
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
189
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
190
190
  <use href="#icon-close-12"></use>
191
191
  </svg>
192
192
  </button>
@@ -196,7 +196,7 @@ export const manyChips = () => `
196
196
  <span class="chip">
197
197
  <span id="chip-interactive-1-1-text" class="chip__text">Cricket</span>
198
198
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
199
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
199
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
200
200
  <use href="#icon-close-12"></use>
201
201
  </svg>
202
202
  </button>
@@ -206,7 +206,7 @@ export const manyChips = () => `
206
206
  <span class="chip">
207
207
  <span id="chip-interactive-1-1-text" class="chip__text">Table Tennis</span>
208
208
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
209
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
209
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
210
210
  <use href="#icon-close-12"></use>
211
211
  </svg>
212
212
  </button>
@@ -216,7 +216,7 @@ export const manyChips = () => `
216
216
  <span class="chip">
217
217
  <span id="chip-interactive-1-1-text" class="chip__text">Rugby</span>
218
218
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
219
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
219
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
220
220
  <use href="#icon-close-12"></use>
221
221
  </svg>
222
222
  </button>
@@ -226,7 +226,7 @@ export const manyChips = () => `
226
226
  <span class="chip">
227
227
  <span id="chip-interactive-1-1-text" class="chip__text">Boxing</span>
228
228
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
229
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
229
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
230
230
  <use href="#icon-close-12"></use>
231
231
  </svg>
232
232
  </button>
@@ -236,7 +236,7 @@ export const manyChips = () => `
236
236
  <span class="chip">
237
237
  <span id="chip-interactive-1-1-text" class="chip__text">Judo</span>
238
238
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
239
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
239
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
240
240
  <use href="#icon-close-12"></use>
241
241
  </svg>
242
242
  </button>
@@ -246,7 +246,7 @@ export const manyChips = () => `
246
246
  <span class="chip">
247
247
  <span id="chip-interactive-1-1-text" class="chip__text">Fencing</span>
248
248
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
249
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
249
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
250
250
  <use href="#icon-close-12"></use>
251
251
  </svg>
252
252
  </button>
@@ -256,7 +256,7 @@ export const manyChips = () => `
256
256
  <span class="chip">
257
257
  <span id="chip-interactive-1-1-text" class="chip__text">Volleyball</span>
258
258
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
259
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
259
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
260
260
  <use href="#icon-close-12"></use>
261
261
  </svg>
262
262
  </button>
@@ -266,7 +266,7 @@ export const manyChips = () => `
266
266
  <span class="chip">
267
267
  <span id="chip-interactive-1-1-text" class="chip__text">Golf</span>
268
268
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
269
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
269
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
270
270
  <use href="#icon-close-12"></use>
271
271
  </svg>
272
272
  </button>
@@ -276,7 +276,7 @@ export const manyChips = () => `
276
276
  <span class="combobox combobox--js chips-combobox__combobox">
277
277
  <span class="combobox__control chips-combobox_combobox__control">
278
278
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
279
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
279
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
280
280
  <use href="#icon-chevron-down-16"></use>
281
281
  </svg>
282
282
  </span>
@@ -306,7 +306,7 @@ export const expanded = () => `
306
306
  <span class="chip">
307
307
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
308
308
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
309
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
309
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
310
310
  <use href="#icon-close-12"></use>
311
311
  </svg>
312
312
  </button>
@@ -316,7 +316,7 @@ export const expanded = () => `
316
316
  <span class="chip">
317
317
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
318
318
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
319
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
319
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
320
320
  <use href="#icon-close-12"></use>
321
321
  </svg>
322
322
  </button>
@@ -326,7 +326,7 @@ export const expanded = () => `
326
326
  <span class="chip">
327
327
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
328
328
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
329
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
329
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
330
330
  <use href="#icon-close-12"></use>
331
331
  </svg>
332
332
  </button>
@@ -336,7 +336,7 @@ export const expanded = () => `
336
336
  <span class="combobox combobox--js combobox--expanded chips-combobox__combobox">
337
337
  <span class="combobox__control chips-combobox_combobox__control">
338
338
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
339
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
339
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
340
340
  <use href="#icon-chevron-down-16"></use>
341
341
  </svg>
342
342
  </span>
@@ -366,7 +366,7 @@ export const disabledState = () => `
366
366
  <span class="chip">
367
367
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
368
368
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
369
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
369
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
370
370
  <use href="#icon-close-12"></use>
371
371
  </svg>
372
372
  </button>
@@ -376,7 +376,7 @@ export const disabledState = () => `
376
376
  <span class="chip">
377
377
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
378
378
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
379
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
379
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
380
380
  <use href="#icon-close-12"></use>
381
381
  </svg>
382
382
  </button>
@@ -386,7 +386,7 @@ export const disabledState = () => `
386
386
  <span class="chip">
387
387
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
388
388
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
389
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
389
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
390
390
  <use href="#icon-close-12"></use>
391
391
  </svg>
392
392
  </button>
@@ -396,7 +396,7 @@ export const disabledState = () => `
396
396
  <span class="combobox combobox--js chips-combobox__combobox">
397
397
  <span class="combobox__control chips-combobox_combobox__control">
398
398
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" disabled />
399
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
399
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
400
400
  <use href="#icon-chevron-down-16"></use>
401
401
  </svg>
402
402
  </span>
@@ -426,7 +426,7 @@ export const errorState = () => `
426
426
  <span class="chip">
427
427
  <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
428
428
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
429
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
429
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
430
430
  <use href="#icon-close-12"></use>
431
431
  </svg>
432
432
  </button>
@@ -436,7 +436,7 @@ export const errorState = () => `
436
436
  <span class="chip">
437
437
  <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
438
438
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-2-text">
439
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
439
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
440
440
  <use href="#icon-close-12"></use>
441
441
  </svg>
442
442
  </button>
@@ -446,7 +446,7 @@ export const errorState = () => `
446
446
  <span class="chip">
447
447
  <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
448
448
  <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-3-text">
449
- <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
449
+ <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
450
450
  <use href="#icon-close-12"></use>
451
451
  </svg>
452
452
  </button>
@@ -456,7 +456,7 @@ export const errorState = () => `
456
456
  <span class="combobox combobox--js chips-combobox__combobox">
457
457
  <span class="combobox__control chips-combobox_combobox__control">
458
458
  <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
459
- <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
459
+ <svg class="icon icon--chevron-down-16" height="16" width="16" aria-hidden="true">
460
460
  <use href="#icon-chevron-down-16"></use>
461
461
  </svg>
462
462
  </span>