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