@ebay/skin 16.9.1 → 17.0.0-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 (389) hide show
  1. package/.storybook/preview-head.html +363 -503
  2. package/CONTRIBUTING.md +20 -4
  3. package/_cdn/skin/v17.0.0-0/skin-default.min.css +69 -0
  4. package/_cdn/skin/v17.0.0-0/skin-full.min.css +151 -0
  5. package/_cdn/skin/v17.0.0-0/skin-headless.min.css +6 -0
  6. package/chips-combobox.browser.json +1 -0
  7. package/chips-combobox.css +1 -0
  8. package/chips-combobox.js +1 -0
  9. package/chips-combobox.mjs +1 -0
  10. package/dist/breadcrumbs/breadcrumbs.css +2 -2
  11. package/dist/chips-combobox/chips-combobox.css +100 -0
  12. package/dist/combobox/combobox.css +1 -1
  13. package/dist/cta-button/cta-button.css +0 -19
  14. package/dist/icon/icon.css +158 -266
  15. package/dist/image-placeholder/image-placeholder.css +2 -0
  16. package/dist/infotip/infotip.css +3 -5
  17. package/dist/listbox/listbox.css +1 -3
  18. package/dist/listbox-button/listbox-button.css +1 -0
  19. package/dist/progress-stepper/progress-stepper.css +0 -14
  20. package/dist/select/select.css +1 -1
  21. package/dist/skeleton/skeleton.css +169 -0
  22. package/dist/svg/icon/icon-brightness-16.svg +7 -0
  23. package/dist/svg/icon/icon-brightness-20.svg +7 -0
  24. package/dist/svg/icon/icon-carryon-24.svg +4 -2
  25. package/dist/svg/icon/icon-certified-recycled-24.svg +4 -2
  26. package/dist/svg/icon/icon-check-in-24.svg +4 -2
  27. package/dist/svg/icon/icon-chevron-up-20.svg +5 -0
  28. package/dist/svg/icon/icon-click-to-call-24.svg +7 -0
  29. package/dist/svg/icon/{icon-ebay-for-charity-16-fit.svg → icon-ebay-for-charity-16.svg} +2 -2
  30. package/dist/svg/icon/icon-ebay-for-charity-24.svg +7 -0
  31. package/dist/svg/icon/icon-ebay-plus-16.svg +7 -0
  32. package/dist/svg/icon/icon-ebay-plus-24.svg +7 -0
  33. package/dist/svg/icon/icon-ebay-preloved-16.svg +3 -1
  34. package/dist/svg/icon/icon-escrow-16.svg +8 -0
  35. package/dist/svg/icon/icon-escrow-24.svg +8 -0
  36. package/dist/svg/icon/icon-external-link-16.svg +2 -2
  37. package/dist/svg/icon/icon-external-link-20.svg +7 -0
  38. package/dist/svg/icon/icon-external-link-24.svg +3 -1
  39. package/dist/svg/icon/icon-face-happy-16.svg +7 -0
  40. package/dist/svg/icon/icon-feedback-16.svg +7 -0
  41. package/dist/svg/icon/icon-feedback-20.svg +7 -0
  42. package/dist/svg/icon/icon-feedback-24.svg +7 -0
  43. package/dist/svg/icon/icon-free-warranty-24.svg +13 -0
  44. package/dist/svg/icon/icon-help-outline-20.svg +7 -0
  45. package/dist/svg/icon/icon-large-box-16.svg +7 -0
  46. package/dist/svg/icon/icon-large-box-24.svg +4 -2
  47. package/dist/svg/icon/icon-map-16.svg +7 -0
  48. package/dist/svg/icon/icon-map-20.svg +7 -0
  49. package/dist/svg/icon/icon-map-24.svg +7 -0
  50. package/dist/svg/icon/icon-medium-box-16.svg +7 -0
  51. package/dist/svg/icon/icon-medium-box-24.svg +4 -2
  52. package/dist/svg/icon/icon-money-back-guarantee-16.svg +7 -0
  53. package/dist/svg/icon/icon-money-back-guarantee-24.svg +7 -0
  54. package/dist/svg/icon/icon-moon-16.svg +7 -0
  55. package/dist/svg/icon/icon-moon-20.svg +7 -0
  56. package/dist/svg/icon/icon-moon-24.svg +7 -0
  57. package/dist/svg/icon/icon-ribbon-16.svg +7 -0
  58. package/dist/svg/icon/icon-ribbon-24.svg +7 -0
  59. package/dist/svg/icon/icon-satchel-16.svg +7 -0
  60. package/dist/svg/icon/icon-satchel-24.svg +4 -2
  61. package/dist/svg/icon/icon-shoe-box-24.svg +4 -2
  62. package/dist/svg/icon/icon-small-box-16.svg +7 -0
  63. package/dist/svg/icon/icon-small-box-24.svg +4 -2
  64. package/dist/svg/icon/icon-snowflake-16.svg +7 -0
  65. package/dist/svg/icon/icon-snowflake-24.svg +7 -0
  66. package/dist/svg/icon/icon-sort-16.svg +7 -0
  67. package/dist/svg/icon/icon-suitcase-24.svg +4 -2
  68. package/dist/svg/icon/icon-the-ebay-vault-16.svg +12 -0
  69. package/dist/svg/icon/icon-the-ebay-vault-24.svg +12 -0
  70. package/dist/svg/icon/icon-tiktok-24.svg +7 -0
  71. package/dist/svg/icon/icon-toggle-mode-bottom-24.svg +7 -0
  72. package/dist/svg/icon/icon-toggle-mode-top-24.svg +7 -0
  73. package/dist/svg/icon/icon-top-rated-seller-24.svg +7 -0
  74. package/dist/svg/icon/icon-top-service-16.svg +7 -0
  75. package/dist/svg/icon/icon-top-service-24.svg +7 -0
  76. package/dist/svg/icon/icon-venmo-12-colored.svg +15 -0
  77. package/dist/svg/icon/icon-venmo-18-colored.svg +15 -0
  78. package/dist/svg/icon/icon-venmo-24-colored.svg +15 -0
  79. package/dist/svg/icon/icon-venmo-32-colored.svg +15 -0
  80. package/dist/svg/icon/icon-verified-condition-16.svg +10 -0
  81. package/dist/svg/icon/icon-verified-condition-24.svg +10 -0
  82. package/dist/svg/icon/icon-youtube-24.svg +5 -0
  83. package/dist/svg/icons.svg +363 -503
  84. package/dist/tokens/evo-core.css +1 -0
  85. package/dist/tokens/evo-dark.css +42 -0
  86. package/dist/tokens/evo-light.css +38 -0
  87. package/dist/tooltip/tooltip.css +4 -6
  88. package/dist/tourtip/tourtip.css +4 -4
  89. package/dist/variables/variables.less +1 -0
  90. package/index.browser.json +2 -0
  91. package/index.css +2 -0
  92. package/index.js +2 -0
  93. package/index.mjs +2 -0
  94. package/package.json +10 -11
  95. package/scripts/generate-bundle.js +2 -5
  96. package/scripts/generate-images.js +6 -4
  97. package/scripts/generate-imports/README.md +3 -35
  98. package/scripts/generate-imports/config.json +2 -29
  99. package/skeleton.browser.json +1 -0
  100. package/skeleton.css +1 -0
  101. package/skeleton.js +1 -0
  102. package/skeleton.mjs +1 -0
  103. package/src/less/avatar/stories/avatar.stories.js +152 -75
  104. package/src/less/breadcrumbs/breadcrumbs.less +2 -2
  105. package/src/less/bundles/skin-headless.less +2 -0
  106. package/src/less/button/button.less +3 -3
  107. package/src/less/chips-combobox/chips-combobox.less +127 -0
  108. package/src/less/chips-combobox/stories/chips-combobox.stories.js +465 -0
  109. package/src/less/chips-combobox/stories/rtl-chips-combobox.stories.js +479 -0
  110. package/src/less/combobox/combobox.less +1 -1
  111. package/src/less/cta-button/cta-button.less +0 -17
  112. package/src/less/icon/generated/icon.less +158 -266
  113. package/src/less/image-placeholder/image-placeholder.less +5 -0
  114. package/src/less/infotip/infotip.less +0 -5
  115. package/src/less/infotip/stories/infotip.stories.js +2 -2
  116. package/src/less/listbox/listbox.less +2 -2
  117. package/src/less/listbox-button/listbox-button.less +2 -0
  118. package/src/less/mixins/private/bubble-mixins.less +4 -0
  119. package/src/less/mixins/private/button-mixins.less +1 -2
  120. package/src/less/mixins/private/token-mixins.less +8 -0
  121. package/src/less/progress-stepper/progress-stepper.less +0 -34
  122. package/src/less/select/select.less +1 -1
  123. package/src/less/skeleton/skeleton.less +208 -0
  124. package/src/less/skeleton/stories/base.stories.js +56 -0
  125. package/src/less/skeleton/stories/composite.stories.js +36 -0
  126. package/src/less/skeleton/stories/rtl.stories.js +7 -0
  127. package/src/less/tooltip/stories/pointer.stories.js +19 -19
  128. package/src/less/tooltip/stories/tooltip.stories.js +1 -1
  129. package/src/less/tooltip/tooltip.less +0 -7
  130. package/src/less/tourtip/tourtip.less +0 -5
  131. package/src/less/variables/variables.less +1 -0
  132. package/src/svg/icon/icon-brightness-16.svg +7 -0
  133. package/src/svg/icon/icon-brightness-20.svg +7 -0
  134. package/src/svg/icon/icon-carryon-24.svg +4 -2
  135. package/src/svg/icon/icon-certified-recycled-24.svg +4 -2
  136. package/src/svg/icon/icon-check-in-24.svg +4 -2
  137. package/src/svg/icon/icon-chevron-up-20.svg +5 -0
  138. package/src/svg/icon/icon-click-to-call-24.svg +7 -0
  139. package/src/svg/icon/{icon-ebay-for-charity-16-fit.svg → icon-ebay-for-charity-16.svg} +2 -2
  140. package/src/svg/icon/icon-ebay-for-charity-24.svg +7 -0
  141. package/src/svg/icon/icon-ebay-plus-16.svg +7 -0
  142. package/src/svg/icon/icon-ebay-plus-24.svg +7 -0
  143. package/src/svg/icon/icon-ebay-preloved-16.svg +3 -1
  144. package/src/svg/icon/icon-escrow-16.svg +8 -0
  145. package/src/svg/icon/icon-escrow-24.svg +8 -0
  146. package/src/svg/icon/icon-external-link-16.svg +2 -2
  147. package/src/svg/icon/icon-external-link-20.svg +7 -0
  148. package/src/svg/icon/icon-external-link-24.svg +3 -1
  149. package/src/svg/icon/icon-face-happy-16.svg +7 -0
  150. package/src/svg/icon/icon-feedback-16.svg +7 -0
  151. package/src/svg/icon/icon-feedback-20.svg +7 -0
  152. package/src/svg/icon/icon-feedback-24.svg +7 -0
  153. package/src/svg/icon/icon-free-warranty-24.svg +13 -0
  154. package/src/svg/icon/icon-help-outline-20.svg +7 -0
  155. package/src/svg/icon/icon-large-box-16.svg +7 -0
  156. package/src/svg/icon/icon-large-box-24.svg +4 -2
  157. package/src/svg/icon/icon-map-16.svg +7 -0
  158. package/src/svg/icon/icon-map-20.svg +7 -0
  159. package/src/svg/icon/icon-map-24.svg +7 -0
  160. package/src/svg/icon/icon-medium-box-16.svg +7 -0
  161. package/src/svg/icon/icon-medium-box-24.svg +4 -2
  162. package/src/svg/icon/icon-money-back-guarantee-16.svg +7 -0
  163. package/src/svg/icon/icon-money-back-guarantee-24.svg +7 -0
  164. package/src/svg/icon/icon-moon-16.svg +7 -0
  165. package/src/svg/icon/icon-moon-20.svg +7 -0
  166. package/src/svg/icon/icon-moon-24.svg +7 -0
  167. package/src/svg/icon/icon-ribbon-16.svg +7 -0
  168. package/src/svg/icon/icon-ribbon-24.svg +7 -0
  169. package/src/svg/icon/icon-satchel-16.svg +7 -0
  170. package/src/svg/icon/icon-satchel-24.svg +4 -2
  171. package/src/svg/icon/icon-shoe-box-24.svg +4 -2
  172. package/src/svg/icon/icon-small-box-16.svg +7 -0
  173. package/src/svg/icon/icon-small-box-24.svg +4 -2
  174. package/src/svg/icon/icon-snowflake-16.svg +7 -0
  175. package/src/svg/icon/icon-snowflake-24.svg +7 -0
  176. package/src/svg/icon/icon-sort-16.svg +7 -0
  177. package/src/svg/icon/icon-suitcase-24.svg +4 -2
  178. package/src/svg/icon/icon-the-ebay-vault-16.svg +12 -0
  179. package/src/svg/icon/icon-the-ebay-vault-24.svg +12 -0
  180. package/src/svg/icon/icon-tiktok-24.svg +7 -0
  181. package/src/svg/icon/icon-toggle-mode-bottom-24.svg +7 -0
  182. package/src/svg/icon/icon-toggle-mode-top-24.svg +7 -0
  183. package/src/svg/icon/icon-top-rated-seller-24.svg +7 -0
  184. package/src/svg/icon/icon-top-service-16.svg +7 -0
  185. package/src/svg/icon/icon-top-service-24.svg +7 -0
  186. package/src/svg/icon/icon-venmo-12-colored.svg +15 -0
  187. package/src/svg/icon/icon-venmo-18-colored.svg +15 -0
  188. package/src/svg/icon/icon-venmo-24-colored.svg +15 -0
  189. package/src/svg/icon/icon-venmo-32-colored.svg +15 -0
  190. package/src/svg/icon/icon-verified-condition-16.svg +10 -0
  191. package/src/svg/icon/icon-verified-condition-24.svg +10 -0
  192. package/src/svg/icon/icon-youtube-24.svg +5 -0
  193. package/src/svg/icons.svg +363 -503
  194. package/src/tokens/evo-core.css +1 -0
  195. package/src/tokens/evo-dark.css +42 -0
  196. package/src/tokens/evo-light.css +38 -0
  197. package/svg.svg +363 -503
  198. package/_cdn/skin/v16.9.1/skin-default.min.css +0 -41
  199. package/_cdn/skin/v16.9.1/skin-full.min.css +0 -88
  200. package/_cdn/skin/v16.9.1/skin-headless.min.css +0 -6
  201. package/_cdn/skin/v16.9.1/skin-legacy.min.css +0 -41
  202. package/dist/legacy-textbox/legacy-textbox.css +0 -61
  203. package/dist/legacy-theme/legacy-theme.css +0 -107
  204. package/dist/legacy-tokens/ds4-core.css +0 -69
  205. package/dist/legacy-tokens/ds4-light.css +0 -137
  206. package/dist/square-corner-theme/square-corner-theme.css +0 -69
  207. package/dist/svg/icon/icon-arrow-title-20.svg +0 -5
  208. package/dist/svg/icon/icon-authenticity-guarantee-16-fit.svg +0 -10
  209. package/dist/svg/icon/icon-authenticity-guarantee-24-fit.svg +0 -10
  210. package/dist/svg/icon/icon-bag-24.svg +0 -5
  211. package/dist/svg/icon/icon-brand-authorized-seller-16-fit.svg +0 -8
  212. package/dist/svg/icon/icon-brand-authorized-seller-24-fit.svg +0 -8
  213. package/dist/svg/icon/icon-certified-recycled-16-fit.svg +0 -5
  214. package/dist/svg/icon/icon-certified-recycled-24-fit.svg +0 -5
  215. package/dist/svg/icon/icon-click-to-call-16-fit.svg +0 -5
  216. package/dist/svg/icon/icon-click-to-call-24-fit.svg +0 -7
  217. package/dist/svg/icon/icon-currency-dollar-16.svg +0 -5
  218. package/dist/svg/icon/icon-currency-dollar-24.svg +0 -5
  219. package/dist/svg/icon/icon-currency-euro-16.svg +0 -5
  220. package/dist/svg/icon/icon-currency-euro-24.svg +0 -5
  221. package/dist/svg/icon/icon-currency-franc-16.svg +0 -5
  222. package/dist/svg/icon/icon-currency-franc-24.svg +0 -5
  223. package/dist/svg/icon/icon-currency-krona-16.svg +0 -5
  224. package/dist/svg/icon/icon-currency-krona-24.svg +0 -5
  225. package/dist/svg/icon/icon-currency-peso-16.svg +0 -7
  226. package/dist/svg/icon/icon-currency-peso-24.svg +0 -7
  227. package/dist/svg/icon/icon-currency-pound-16.svg +0 -5
  228. package/dist/svg/icon/icon-currency-pound-24.svg +0 -5
  229. package/dist/svg/icon/icon-currency-ringgit-16.svg +0 -10
  230. package/dist/svg/icon/icon-currency-ringgit-24.svg +0 -10
  231. package/dist/svg/icon/icon-currency-rupee-16.svg +0 -5
  232. package/dist/svg/icon/icon-currency-rupee-24.svg +0 -5
  233. package/dist/svg/icon/icon-currency-won-16.svg +0 -7
  234. package/dist/svg/icon/icon-currency-won-24.svg +0 -7
  235. package/dist/svg/icon/icon-currency-yuan-16.svg +0 -5
  236. package/dist/svg/icon/icon-currency-yuan-24.svg +0 -5
  237. package/dist/svg/icon/icon-currency-zloty-16.svg +0 -8
  238. package/dist/svg/icon/icon-currency-zloty-24.svg +0 -10
  239. package/dist/svg/icon/icon-direct-from-brand-16-fit.svg +0 -8
  240. package/dist/svg/icon/icon-direct-from-brand-24-fit.svg +0 -8
  241. package/dist/svg/icon/icon-ebay-bucks-16-colored.svg +0 -10
  242. package/dist/svg/icon/icon-ebay-for-charity-24-fit.svg +0 -7
  243. package/dist/svg/icon/icon-ebay-international-shipping-16-fit.svg +0 -7
  244. package/dist/svg/icon/icon-ebay-international-shipping-24-fit.svg +0 -7
  245. package/dist/svg/icon/icon-ebay-plus-16-fit.svg +0 -5
  246. package/dist/svg/icon/icon-ebay-plus-24-fit.svg +0 -5
  247. package/dist/svg/icon/icon-ebay-refurbished-16-fit.svg +0 -7
  248. package/dist/svg/icon/icon-ebay-refurbished-24-fit.svg +0 -7
  249. package/dist/svg/icon/icon-escrow-16-fit.svg +0 -8
  250. package/dist/svg/icon/icon-escrow-24-fit.svg +0 -8
  251. package/dist/svg/icon/icon-free-warranty-16-fit.svg +0 -12
  252. package/dist/svg/icon/icon-free-warranty-24-fit.svg +0 -13
  253. package/dist/svg/icon/icon-money-back-guarantee-16-fit.svg +0 -7
  254. package/dist/svg/icon/icon-money-back-guarantee-24-fit.svg +0 -7
  255. package/dist/svg/icon/icon-nectar-24-colored.svg +0 -24
  256. package/dist/svg/icon/icon-pause-64-colored.svg +0 -7
  257. package/dist/svg/icon/icon-play-64-colored.svg +0 -7
  258. package/dist/svg/icon/icon-play-filled-16.svg +0 -7
  259. package/dist/svg/icon/icon-play-filled-24.svg +0 -5
  260. package/dist/svg/icon/icon-rotate-landscape-left.svg +0 -10
  261. package/dist/svg/icon/icon-rotate-landscape-right.svg +0 -10
  262. package/dist/svg/icon/icon-rotate-portrait-left.svg +0 -10
  263. package/dist/svg/icon/icon-rotate-portrait-right.svg +0 -10
  264. package/dist/svg/icon/icon-social-discord-24.svg +0 -5
  265. package/dist/svg/icon/icon-social-facebook-24.svg +0 -5
  266. package/dist/svg/icon/icon-social-facebook-messenger-24.svg +0 -5
  267. package/dist/svg/icon/icon-social-instagram-24.svg +0 -5
  268. package/dist/svg/icon/icon-social-link-24.svg +0 -11
  269. package/dist/svg/icon/icon-social-linkedin-24.svg +0 -5
  270. package/dist/svg/icon/icon-social-pinterest-24.svg +0 -5
  271. package/dist/svg/icon/icon-social-reddit-24.svg +0 -9
  272. package/dist/svg/icon/icon-social-twitter-24.svg +0 -5
  273. package/dist/svg/icon/icon-social-whatsapp-24.svg +0 -7
  274. package/dist/svg/icon/icon-the-ebay-vault-16-fit.svg +0 -12
  275. package/dist/svg/icon/icon-the-ebay-vault-24-fit.svg +0 -12
  276. package/dist/svg/icon/icon-top-rated-seller-16-fit.svg +0 -7
  277. package/dist/svg/icon/icon-top-rated-seller-24-fit.svg +0 -7
  278. package/dist/svg/icon/icon-trend-down-16.svg +0 -5
  279. package/dist/svg/icon/icon-trend-up-16.svg +0 -5
  280. package/dist/svg/icon/icon-verified-condition-16-fit.svg +0 -10
  281. package/dist/svg/icon/icon-verified-condition-24-fit.svg +0 -10
  282. package/legacy-textbox.browser.json +0 -1
  283. package/legacy-textbox.css +0 -1
  284. package/legacy-textbox.js +0 -1
  285. package/legacy-textbox.mjs +0 -1
  286. package/legacy-theme.browser.json +0 -1
  287. package/legacy-theme.css +0 -1
  288. package/legacy-theme.js +0 -1
  289. package/legacy-theme.mjs +0 -1
  290. package/legacy-tokens/browser.json +0 -1
  291. package/legacy-tokens/ds4-core.browser.json +0 -1
  292. package/legacy-tokens/ds4-core.css +0 -1
  293. package/legacy-tokens/ds4-core.js +0 -1
  294. package/legacy-tokens/ds4-core.mjs +0 -1
  295. package/legacy-tokens/ds4-light.browser.json +0 -1
  296. package/legacy-tokens/ds4-light.css +0 -1
  297. package/legacy-tokens/ds4-light.js +0 -1
  298. package/legacy-tokens/ds4-light.mjs +0 -1
  299. package/legacy-tokens/index.css +0 -2
  300. package/legacy-tokens/index.js +0 -2
  301. package/legacy-tokens/index.mjs +0 -2
  302. package/legacy-tokens.css +0 -2
  303. package/legacy-tokens.js +0 -2
  304. package/legacy-tokens.mjs +0 -2
  305. package/square-corner-theme.browser.json +0 -1
  306. package/square-corner-theme.css +0 -1
  307. package/square-corner-theme.js +0 -1
  308. package/square-corner-theme.mjs +0 -1
  309. package/src/legacy-tokens/ds4-core.css +0 -69
  310. package/src/less/bundles/skin-legacy.less +0 -3
  311. package/src/less/legacy-textbox/legacy-textbox.less +0 -105
  312. package/src/less/legacy-theme/legacy-theme.less +0 -125
  313. package/src/less/section-notice/stories/legacy.stories.js +0 -32
  314. package/src/less/square-corner-theme/square-corner-theme.less +0 -90
  315. package/src/svg/icon/icon-arrow-title-20.svg +0 -5
  316. package/src/svg/icon/icon-authenticity-guarantee-16-fit.svg +0 -10
  317. package/src/svg/icon/icon-authenticity-guarantee-24-fit.svg +0 -10
  318. package/src/svg/icon/icon-bag-24.svg +0 -5
  319. package/src/svg/icon/icon-brand-authorized-seller-16-fit.svg +0 -8
  320. package/src/svg/icon/icon-brand-authorized-seller-24-fit.svg +0 -8
  321. package/src/svg/icon/icon-certified-recycled-16-fit.svg +0 -5
  322. package/src/svg/icon/icon-certified-recycled-24-fit.svg +0 -5
  323. package/src/svg/icon/icon-click-to-call-16-fit.svg +0 -5
  324. package/src/svg/icon/icon-click-to-call-24-fit.svg +0 -7
  325. package/src/svg/icon/icon-currency-dollar-16.svg +0 -5
  326. package/src/svg/icon/icon-currency-dollar-24.svg +0 -5
  327. package/src/svg/icon/icon-currency-euro-16.svg +0 -5
  328. package/src/svg/icon/icon-currency-euro-24.svg +0 -5
  329. package/src/svg/icon/icon-currency-franc-16.svg +0 -5
  330. package/src/svg/icon/icon-currency-franc-24.svg +0 -5
  331. package/src/svg/icon/icon-currency-krona-16.svg +0 -5
  332. package/src/svg/icon/icon-currency-krona-24.svg +0 -5
  333. package/src/svg/icon/icon-currency-peso-16.svg +0 -7
  334. package/src/svg/icon/icon-currency-peso-24.svg +0 -7
  335. package/src/svg/icon/icon-currency-pound-16.svg +0 -5
  336. package/src/svg/icon/icon-currency-pound-24.svg +0 -5
  337. package/src/svg/icon/icon-currency-ringgit-16.svg +0 -10
  338. package/src/svg/icon/icon-currency-ringgit-24.svg +0 -10
  339. package/src/svg/icon/icon-currency-rupee-16.svg +0 -5
  340. package/src/svg/icon/icon-currency-rupee-24.svg +0 -5
  341. package/src/svg/icon/icon-currency-won-16.svg +0 -7
  342. package/src/svg/icon/icon-currency-won-24.svg +0 -7
  343. package/src/svg/icon/icon-currency-yuan-16.svg +0 -5
  344. package/src/svg/icon/icon-currency-yuan-24.svg +0 -5
  345. package/src/svg/icon/icon-currency-zloty-16.svg +0 -8
  346. package/src/svg/icon/icon-currency-zloty-24.svg +0 -10
  347. package/src/svg/icon/icon-direct-from-brand-16-fit.svg +0 -8
  348. package/src/svg/icon/icon-direct-from-brand-24-fit.svg +0 -8
  349. package/src/svg/icon/icon-ebay-bucks-16-colored.svg +0 -10
  350. package/src/svg/icon/icon-ebay-for-charity-24-fit.svg +0 -7
  351. package/src/svg/icon/icon-ebay-international-shipping-16-fit.svg +0 -7
  352. package/src/svg/icon/icon-ebay-international-shipping-24-fit.svg +0 -7
  353. package/src/svg/icon/icon-ebay-plus-16-fit.svg +0 -5
  354. package/src/svg/icon/icon-ebay-plus-24-fit.svg +0 -5
  355. package/src/svg/icon/icon-ebay-refurbished-16-fit.svg +0 -7
  356. package/src/svg/icon/icon-ebay-refurbished-24-fit.svg +0 -7
  357. package/src/svg/icon/icon-escrow-16-fit.svg +0 -8
  358. package/src/svg/icon/icon-escrow-24-fit.svg +0 -8
  359. package/src/svg/icon/icon-free-warranty-16-fit.svg +0 -12
  360. package/src/svg/icon/icon-free-warranty-24-fit.svg +0 -13
  361. package/src/svg/icon/icon-money-back-guarantee-16-fit.svg +0 -7
  362. package/src/svg/icon/icon-money-back-guarantee-24-fit.svg +0 -7
  363. package/src/svg/icon/icon-nectar-24-colored.svg +0 -24
  364. package/src/svg/icon/icon-pause-64-colored.svg +0 -7
  365. package/src/svg/icon/icon-play-64-colored.svg +0 -7
  366. package/src/svg/icon/icon-play-filled-16.svg +0 -7
  367. package/src/svg/icon/icon-play-filled-24.svg +0 -5
  368. package/src/svg/icon/icon-rotate-landscape-left.svg +0 -10
  369. package/src/svg/icon/icon-rotate-landscape-right.svg +0 -10
  370. package/src/svg/icon/icon-rotate-portrait-left.svg +0 -10
  371. package/src/svg/icon/icon-rotate-portrait-right.svg +0 -10
  372. package/src/svg/icon/icon-social-discord-24.svg +0 -5
  373. package/src/svg/icon/icon-social-facebook-24.svg +0 -5
  374. package/src/svg/icon/icon-social-facebook-messenger-24.svg +0 -5
  375. package/src/svg/icon/icon-social-instagram-24.svg +0 -5
  376. package/src/svg/icon/icon-social-link-24.svg +0 -11
  377. package/src/svg/icon/icon-social-linkedin-24.svg +0 -5
  378. package/src/svg/icon/icon-social-pinterest-24.svg +0 -5
  379. package/src/svg/icon/icon-social-reddit-24.svg +0 -9
  380. package/src/svg/icon/icon-social-twitter-24.svg +0 -5
  381. package/src/svg/icon/icon-social-whatsapp-24.svg +0 -7
  382. package/src/svg/icon/icon-the-ebay-vault-16-fit.svg +0 -12
  383. package/src/svg/icon/icon-the-ebay-vault-24-fit.svg +0 -12
  384. package/src/svg/icon/icon-top-rated-seller-16-fit.svg +0 -7
  385. package/src/svg/icon/icon-top-rated-seller-24-fit.svg +0 -7
  386. package/src/svg/icon/icon-trend-down-16.svg +0 -5
  387. package/src/svg/icon/icon-trend-up-16.svg +0 -5
  388. package/src/svg/icon/icon-verified-condition-16-fit.svg +0 -10
  389. package/src/svg/icon/icon-verified-condition-24-fit.svg +0 -10
package/src/less/chips-combobox/stories/chips-combobox.stories.js ADDED
@@ -0,0 +1,465 @@
1
+ export default { title: "Skin/Chips Combobox/Base" };
2
+
3
+ export const empty = () => `
4
+ <span class="chips-combobox">
5
+ <ul class="chips-combobox__items" aria-label="Selected sports"></ul>
6
+ <span class="combobox combobox--js chips-combobox__combobox">
7
+ <span class="combobox__control chips-combobox_combobox__control">
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">
10
+ <use href="#icon-chevron-down-16"></use>
11
+ </svg>
12
+ </span>
13
+ <div class="combobox__listbox">
14
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
15
+ <div class="combobox__option" role="option">
16
+ <span>Soccer</span>
17
+ </div>
18
+ <div class="combobox__option" role="option">
19
+ <span>Hockey</span>
20
+ </div>
21
+ <div class="combobox__option" role="option">
22
+ <span>Tennis</span>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ </span>
27
+ </span>
28
+ `;
29
+
30
+ export const fluid = () => `
31
+ <span class="chips-combobox chips-combobox--fluid">
32
+ <ul class="chips-combobox__items" aria-label="Selected sports"></ul>
33
+ <span class="combobox combobox--js chips-combobox__combobox">
34
+ <span class="combobox__control chips-combobox_combobox__control">
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">
37
+ <use href="#icon-chevron-down-16"></use>
38
+ </svg>
39
+ </span>
40
+ <div class="combobox__listbox">
41
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
42
+ <div class="combobox__option" role="option">
43
+ <span>Soccer</span>
44
+ </div>
45
+ <div class="combobox__option" role="option">
46
+ <span>Hockey</span>
47
+ </div>
48
+ <div class="combobox__option" role="option">
49
+ <span>Tennis</span>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </span>
54
+ </span>
55
+ `;
56
+
57
+ export const prefilled = () => `
58
+ <span class="chips-combobox">
59
+ <ul class="chips-combobox__items" aria-label="Selected sports">
60
+ <li>
61
+ <span class="chip">
62
+ <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
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">
65
+ <use href="#icon-close-12"></use>
66
+ </svg>
67
+ </button>
68
+ </span>
69
+ </li>
70
+ <li>
71
+ <span class="chip">
72
+ <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
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">
75
+ <use href="#icon-close-12"></use>
76
+ </svg>
77
+ </button>
78
+ </span>
79
+ </li>
80
+ <li>
81
+ <span class="chip">
82
+ <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
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">
85
+ <use href="#icon-close-12"></use>
86
+ </svg>
87
+ </button>
88
+ </span>
89
+ </li>
90
+ </ul>
91
+ <span class="combobox combobox--js chips-combobox__combobox">
92
+ <span class="combobox__control chips-combobox_combobox__control">
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">
95
+ <use href="#icon-chevron-down-16"></use>
96
+ </svg>
97
+ </span>
98
+ <div class="combobox__listbox">
99
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
100
+ <div class="combobox__option" role="option">
101
+ <span>Soccer</span>
102
+ </div>
103
+ <div class="combobox__option" role="option">
104
+ <span>Hockey</span>
105
+ </div>
106
+ <div class="combobox__option" role="option">
107
+ <span>Tennis</span>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </span>
112
+ </span>
113
+ `;
114
+
115
+ export const manyChips = () => `
116
+ <span class="chips-combobox">
117
+ <ul class="chips-combobox__items" aria-label="Selected sports">
118
+ <li>
119
+ <span class="chip">
120
+ <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
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">
123
+ <use href="#icon-close-12"></use>
124
+ </svg>
125
+ </button>
126
+ </span>
127
+ </li>
128
+ <li>
129
+ <span class="chip">
130
+ <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
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">
133
+ <use href="#icon-close-12"></use>
134
+ </svg>
135
+ </button>
136
+ </span>
137
+ </li>
138
+ <li>
139
+ <span class="chip">
140
+ <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
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">
143
+ <use href="#icon-close-12"></use>
144
+ </svg>
145
+ </button>
146
+ </span>
147
+ </li>
148
+ <li>
149
+ <span class="chip">
150
+ <span id="chip-interactive-1-1-text" class="chip__text">Soccer</span>
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">
153
+ <use href="#icon-close-12"></use>
154
+ </svg>
155
+ </button>
156
+ </span>
157
+ </li>
158
+ <li>
159
+ <span class="chip">
160
+ <span id="chip-interactive-1-1-text" class="chip__text">Hockey</span>
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">
163
+ <use href="#icon-close-12"></use>
164
+ </svg>
165
+ </button>
166
+ </span>
167
+ </li>
168
+ <li>
169
+ <span class="chip">
170
+ <span id="chip-interactive-1-1-text" class="chip__text">Tennis</span>
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">
173
+ <use href="#icon-close-12"></use>
174
+ </svg>
175
+ </button>
176
+ </span>
177
+ </li>
178
+ <li>
179
+ <span class="chip">
180
+ <span id="chip-interactive-1-1-text" class="chip__text">Swimming</span>
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">
183
+ <use href="#icon-close-12"></use>
184
+ </svg>
185
+ </button>
186
+ </span>
187
+ </li>
188
+ <li>
189
+ <span class="chip">
190
+ <span id="chip-interactive-1-1-text" class="chip__text">Cricket</span>
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">
193
+ <use href="#icon-close-12"></use>
194
+ </svg>
195
+ </button>
196
+ </span>
197
+ </li>
198
+ <li>
199
+ <span class="chip">
200
+ <span id="chip-interactive-1-1-text" class="chip__text">Table Tennis</span>
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">
203
+ <use href="#icon-close-12"></use>
204
+ </svg>
205
+ </button>
206
+ </span>
207
+ </li>
208
+ <li>
209
+ <span class="chip">
210
+ <span id="chip-interactive-1-1-text" class="chip__text">Rugby</span>
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">
213
+ <use href="#icon-close-12"></use>
214
+ </svg>
215
+ </button>
216
+ </span>
217
+ </li>
218
+ <li>
219
+ <span class="chip">
220
+ <span id="chip-interactive-1-1-text" class="chip__text">Boxing</span>
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">
223
+ <use href="#icon-close-12"></use>
224
+ </svg>
225
+ </button>
226
+ </span>
227
+ </li>
228
+ <li>
229
+ <span class="chip">
230
+ <span id="chip-interactive-1-1-text" class="chip__text">Judo</span>
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">
233
+ <use href="#icon-close-12"></use>
234
+ </svg>
235
+ </button>
236
+ </span>
237
+ </li>
238
+ <li>
239
+ <span class="chip">
240
+ <span id="chip-interactive-1-1-text" class="chip__text">Fencing</span>
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">
243
+ <use href="#icon-close-12"></use>
244
+ </svg>
245
+ </button>
246
+ </span>
247
+ </li>
248
+ <li>
249
+ <span class="chip">
250
+ <span id="chip-interactive-1-1-text" class="chip__text">Volleyball</span>
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">
253
+ <use href="#icon-close-12"></use>
254
+ </svg>
255
+ </button>
256
+ </span>
257
+ </li>
258
+ <li>
259
+ <span class="chip">
260
+ <span id="chip-interactive-1-1-text" class="chip__text">Golf</span>
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">
263
+ <use href="#icon-close-12"></use>
264
+ </svg>
265
+ </button>
266
+ </span>
267
+ </li>
268
+ </ul>
269
+ <span class="combobox combobox--js chips-combobox__combobox">
270
+ <span class="combobox__control chips-combobox_combobox__control">
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">
273
+ <use href="#icon-chevron-down-16"></use>
274
+ </svg>
275
+ </span>
276
+ <div class="combobox__listbox">
277
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
278
+ <div class="combobox__option" role="option">
279
+ <span>Soccer</span>
280
+ </div>
281
+ <div class="combobox__option" role="option">
282
+ <span>Hockey</span>
283
+ </div>
284
+ <div class="combobox__option" role="option">
285
+ <span>Tennis</span>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </span>
290
+ </span>
291
+ `;
292
+
293
+ export const expanded = () => `
294
+ <span class="chips-combobox">
295
+ <ul class="chips-combobox__items" aria-label="Selected sports">
296
+ <li>
297
+ <span class="chip">
298
+ <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
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">
301
+ <use href="#icon-close-12"></use>
302
+ </svg>
303
+ </button>
304
+ </span>
305
+ </li>
306
+ <li>
307
+ <span class="chip">
308
+ <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
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">
311
+ <use href="#icon-close-12"></use>
312
+ </svg>
313
+ </button>
314
+ </span>
315
+ </li>
316
+ <li>
317
+ <span class="chip">
318
+ <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
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">
321
+ <use href="#icon-close-12"></use>
322
+ </svg>
323
+ </button>
324
+ </span>
325
+ </li>
326
+ </ul>
327
+ <span class="combobox combobox--js combobox--expanded chips-combobox__combobox">
328
+ <span class="combobox__control chips-combobox_combobox__control">
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">
331
+ <use href="#icon-chevron-down-16"></use>
332
+ </svg>
333
+ </span>
334
+ <div class="combobox__listbox">
335
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
336
+ <div class="combobox__option" role="option">
337
+ <span>Soccer</span>
338
+ </div>
339
+ <div class="combobox__option" role="option">
340
+ <span>Hockey</span>
341
+ </div>
342
+ <div class="combobox__option" role="option">
343
+ <span>Tennis</span>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </span>
348
+ </span>
349
+ `;
350
+
351
+ export const disabledState = () => `
352
+ <span class="chips-combobox" aria-disabled="true">
353
+ <ul class="chips-combobox__items" aria-label="Selected sports">
354
+ <li>
355
+ <span class="chip">
356
+ <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
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">
359
+ <use href="#icon-close-12"></use>
360
+ </svg>
361
+ </button>
362
+ </span>
363
+ </li>
364
+ <li>
365
+ <span class="chip">
366
+ <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
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">
369
+ <use href="#icon-close-12"></use>
370
+ </svg>
371
+ </button>
372
+ </span>
373
+ </li>
374
+ <li>
375
+ <span class="chip">
376
+ <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
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">
379
+ <use href="#icon-close-12"></use>
380
+ </svg>
381
+ </button>
382
+ </span>
383
+ </li>
384
+ </ul>
385
+ <span class="combobox combobox--js chips-combobox__combobox">
386
+ <span class="combobox__control chips-combobox_combobox__control">
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">
389
+ <use href="#icon-chevron-down-16"></use>
390
+ </svg>
391
+ </span>
392
+ <div class="combobox__listbox">
393
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
394
+ <div class="combobox__option" role="option">
395
+ <span>Soccer</span>
396
+ </div>
397
+ <div class="combobox__option" role="option">
398
+ <span>Hockey</span>
399
+ </div>
400
+ <div class="combobox__option" role="option">
401
+ <span>Tennis</span>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </span>
406
+ </span>
407
+ `;
408
+
409
+ export const errorState = () => `
410
+ <span class="chips-combobox chips-combobox--error">
411
+ <ul class="chips-combobox__items" aria-label="Selected sports">
412
+ <li>
413
+ <span class="chip">
414
+ <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
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">
417
+ <use href="#icon-close-12"></use>
418
+ </svg>
419
+ </button>
420
+ </span>
421
+ </li>
422
+ <li>
423
+ <span class="chip">
424
+ <span id="chip-interactive-1-2-text" class="chip__text">Basketball</span>
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">
427
+ <use href="#icon-close-12"></use>
428
+ </svg>
429
+ </button>
430
+ </span>
431
+ </li>
432
+ <li>
433
+ <span class="chip">
434
+ <span id="chip-interactive-1-3-text" class="chip__text">Baseball</span>
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">
437
+ <use href="#icon-close-12"></use>
438
+ </svg>
439
+ </button>
440
+ </span>
441
+ </li>
442
+ </ul>
443
+ <span class="combobox combobox--js chips-combobox__combobox">
444
+ <span class="combobox__control chips-combobox_combobox__control">
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">
447
+ <use href="#icon-chevron-down-16"></use>
448
+ </svg>
449
+ </span>
450
+ <div class="combobox__listbox">
451
+ <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
452
+ <div class="combobox__option" role="option">
453
+ <span>Soccer</span>
454
+ </div>
455
+ <div class="combobox__option" role="option">
456
+ <span>Hockey</span>
457
+ </div>
458
+ <div class="combobox__option" role="option">
459
+ <span>Tennis</span>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </span>
464
+ </span>
465
+ `;