@ebay/skin 17.5.0 → 18.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 (469) hide show
  1. package/.github/workflows/pages-html-proofer.yml +1 -1
  2. package/.prettierignore +0 -1
  3. package/.storybook/main.js +4 -11
  4. package/.storybook/preview.js +1 -1
  5. package/.stylelintrc +16 -24
  6. package/CHANGELOG.md +40 -0
  7. package/CONTRIBUTING.md +1 -1
  8. package/bundles.browser.json +1 -0
  9. package/bundles.css +1 -0
  10. package/bundles.js +1 -0
  11. package/bundles.mjs +1 -0
  12. package/chart-legend.browser.json +1 -0
  13. package/chart-legend.css +1 -0
  14. package/chart-legend.js +1 -0
  15. package/chart-legend.mjs +1 -0
  16. package/dist/alert-dialog/alert-dialog.css +84 -72
  17. package/dist/alert-dialog/alert-dialog.css.map +1 -0
  18. package/dist/avatar/avatar.css +81 -62
  19. package/dist/avatar/avatar.css.map +1 -0
  20. package/dist/badge/badge.css +16 -11
  21. package/dist/badge/badge.css.map +1 -0
  22. package/dist/breadcrumbs/breadcrumbs.css +87 -59
  23. package/dist/breadcrumbs/breadcrumbs.css.map +1 -0
  24. package/dist/bundles/skin-default.css +10073 -0
  25. package/dist/bundles/skin-default.css.map +1 -0
  26. package/dist/bundles/skin-full.css +10257 -0
  27. package/dist/bundles/skin-full.css.map +1 -0
  28. package/dist/bundles/skin-headless.css +9685 -0
  29. package/dist/bundles/skin-headless.css.map +1 -0
  30. package/dist/button/button.css +590 -415
  31. package/dist/button/button.css.map +1 -0
  32. package/dist/calendar/calendar.css +148 -102
  33. package/dist/calendar/calendar.css.map +1 -0
  34. package/dist/carousel/carousel.css +233 -212
  35. package/dist/carousel/carousel.css.map +1 -0
  36. package/dist/chart-legend/chart-legend.css +77 -0
  37. package/dist/chart-legend/chart-legend.css.map +1 -0
  38. package/dist/checkbox/checkbox.css +77 -54
  39. package/dist/checkbox/checkbox.css.map +1 -0
  40. package/dist/chip/chip.css +41 -34
  41. package/dist/chip/chip.css.map +1 -0
  42. package/dist/chips-combobox/chips-combobox.css +77 -62
  43. package/dist/chips-combobox/chips-combobox.css.map +1 -0
  44. package/dist/combobox/combobox.css +246 -163
  45. package/dist/combobox/combobox.css.map +1 -0
  46. package/dist/confirm-dialog/confirm-dialog.css +86 -73
  47. package/dist/confirm-dialog/confirm-dialog.css.map +1 -0
  48. package/dist/cta-button/cta-button.css +96 -70
  49. package/dist/cta-button/cta-button.css.map +1 -0
  50. package/dist/date-textbox/date-textbox.css +24 -15
  51. package/dist/date-textbox/date-textbox.css.map +1 -0
  52. package/dist/details/details.css +34 -27
  53. package/dist/details/details.css.map +1 -0
  54. package/dist/donut-chart/donut-chart.css +91 -0
  55. package/dist/donut-chart/donut-chart.css.map +1 -0
  56. package/dist/drawer-dialog/drawer-dialog.css +133 -118
  57. package/dist/drawer-dialog/drawer-dialog.css.map +1 -0
  58. package/dist/education-notice/education-notice.css +62 -34
  59. package/dist/education-notice/education-notice.css.map +1 -0
  60. package/dist/eek/eek.css +97 -74
  61. package/dist/eek/eek.css.map +1 -0
  62. package/dist/field/field.css +87 -53
  63. package/dist/field/field.css.map +1 -0
  64. package/dist/filter-button/filter-button.css +115 -75
  65. package/dist/filter-button/filter-button.css.map +1 -0
  66. package/dist/filter-menu/filter-menu.css +176 -121
  67. package/dist/filter-menu/filter-menu.css.map +1 -0
  68. package/dist/filter-menu-button/filter-menu-button.css +307 -181
  69. package/dist/filter-menu-button/filter-menu-button.css.map +1 -0
  70. package/dist/flag/flag.css +528 -272
  71. package/dist/flag/flag.css.map +1 -0
  72. package/dist/floating-label/floating-label.css +100 -51
  73. package/dist/floating-label/floating-label.css.map +1 -0
  74. package/dist/fullscreen-dialog/fullscreen-dialog.css +112 -99
  75. package/dist/fullscreen-dialog/fullscreen-dialog.css.map +1 -0
  76. package/dist/global/global.css +32 -13
  77. package/dist/global/global.css.map +1 -0
  78. package/dist/icon/icon.css +56 -2943
  79. package/dist/icon/icon.css.map +1 -0
  80. package/dist/icon-button/icon-button.css +307 -212
  81. package/dist/icon-button/icon-button.css.map +1 -0
  82. package/dist/image-placeholder/image-placeholder.css +6 -4
  83. package/dist/image-placeholder/image-placeholder.css.map +1 -0
  84. package/dist/infotip/infotip.css +121 -92
  85. package/dist/infotip/infotip.css.map +1 -0
  86. package/dist/inline-notice/inline-notice.css +16 -9
  87. package/dist/inline-notice/inline-notice.css.map +1 -0
  88. package/dist/lightbox-dialog/lightbox-dialog.css +241 -185
  89. package/dist/lightbox-dialog/lightbox-dialog.css.map +1 -0
  90. package/dist/link/link.css +37 -19
  91. package/dist/link/link.css.map +1 -0
  92. package/dist/listbox/listbox.css +86 -58
  93. package/dist/listbox/listbox.css.map +1 -0
  94. package/dist/listbox-button/listbox-button.css +240 -134
  95. package/dist/listbox-button/listbox-button.css.map +1 -0
  96. package/dist/marketsans/marketsans.css +34 -12
  97. package/dist/marketsans/marketsans.css.map +1 -0
  98. package/dist/menu/menu.css +136 -99
  99. package/dist/menu/menu.css.map +1 -0
  100. package/dist/menu-button/menu-button.css +236 -157
  101. package/dist/menu-button/menu-button.css.map +1 -0
  102. package/dist/mixins/_typography-mixins.scss +136 -0
  103. package/dist/mixins/_utility-mixins.scss +62 -0
  104. package/dist/page-grid/page-grid.css +57 -46
  105. package/dist/page-grid/page-grid.css.map +1 -0
  106. package/dist/page-notice/page-notice.css +142 -85
  107. package/dist/page-notice/page-notice.css.map +1 -0
  108. package/dist/pagination/pagination.css +109 -80
  109. package/dist/pagination/pagination.css.map +1 -0
  110. package/dist/panel-dialog/panel-dialog.css +115 -98
  111. package/dist/panel-dialog/panel-dialog.css.map +1 -0
  112. package/dist/phone-input/phone-input.css +100 -88
  113. package/dist/phone-input/phone-input.css.map +1 -0
  114. package/dist/progress-bar/progress-bar.css +32 -15
  115. package/dist/progress-bar/progress-bar.css.map +1 -0
  116. package/dist/progress-bar-expressive/progress-bar-expressive.css +302 -203
  117. package/dist/progress-bar-expressive/progress-bar-expressive.css.map +1 -0
  118. package/dist/progress-spinner/progress-spinner.css +24 -20
  119. package/dist/progress-spinner/progress-spinner.css.map +1 -0
  120. package/dist/progress-stepper/progress-stepper.css +229 -117
  121. package/dist/progress-stepper/progress-stepper.css.map +1 -0
  122. package/dist/radio/radio.css +71 -52
  123. package/dist/radio/radio.css.map +1 -0
  124. package/dist/section-notice/section-notice.css +102 -72
  125. package/dist/section-notice/section-notice.css.map +1 -0
  126. package/dist/section-title/section-title.css +66 -52
  127. package/dist/section-title/section-title.css.map +1 -0
  128. package/dist/segmented-buttons/segmented-buttons.css +49 -38
  129. package/dist/segmented-buttons/segmented-buttons.css.map +1 -0
  130. package/dist/select/select.css +98 -62
  131. package/dist/select/select.css.map +1 -0
  132. package/dist/signal/signal.css +25 -16
  133. package/dist/signal/signal.css.map +1 -0
  134. package/dist/skeleton/skeleton.css +131 -108
  135. package/dist/skeleton/skeleton.css.map +1 -0
  136. package/dist/snackbar-dialog/snackbar-dialog.css +82 -52
  137. package/dist/snackbar-dialog/snackbar-dialog.css.map +1 -0
  138. package/dist/split-button/split-button.css +3 -1
  139. package/dist/split-button/split-button.css.map +1 -0
  140. package/dist/star-rating/star-rating.css +40 -19
  141. package/dist/star-rating/star-rating.css.map +1 -0
  142. package/dist/star-rating-select/star-rating-select.css +67 -39
  143. package/dist/star-rating-select/star-rating-select.css.map +1 -0
  144. package/dist/svg/icons.svg +21 -21
  145. package/dist/switch/switch.css +119 -78
  146. package/dist/switch/switch.css.map +1 -0
  147. package/dist/tabs/tabs.css +70 -51
  148. package/dist/tabs/tabs.css.map +1 -0
  149. package/dist/textbox/textbox.css +167 -112
  150. package/dist/textbox/textbox.css.map +1 -0
  151. package/dist/toast-dialog/toast-dialog.css +140 -90
  152. package/dist/toast-dialog/toast-dialog.css.map +1 -0
  153. package/dist/toggle-button/toggle-button.css +154 -114
  154. package/dist/toggle-button/toggle-button.css.map +1 -0
  155. package/dist/toggle-button-group/toggle-button-group.css +610 -60
  156. package/dist/toggle-button-group/toggle-button-group.css.map +1 -0
  157. package/dist/tokens/evo-core.css +139 -67
  158. package/dist/tokens/evo-dark.css +57 -62
  159. package/dist/tokens/evo-light.css +76 -76
  160. package/dist/tooltip/tooltip.css +117 -84
  161. package/dist/tooltip/tooltip.css.map +1 -0
  162. package/dist/tourtip/tourtip.css +141 -107
  163. package/dist/tourtip/tourtip.css.map +1 -0
  164. package/dist/typography/typography.css +86 -59
  165. package/dist/typography/typography.css.map +1 -0
  166. package/dist/utility/utility.css +75 -72
  167. package/dist/utility/utility.css.map +1 -0
  168. package/dist/variables/_variables.scss +64 -0
  169. package/dist/video/video.css +46 -34
  170. package/dist/video/video.css.map +1 -0
  171. package/donut-chart.browser.json +1 -0
  172. package/donut-chart.css +1 -0
  173. package/donut-chart.js +1 -0
  174. package/donut-chart.mjs +1 -0
  175. package/gh.browser.json +4 -4
  176. package/index.browser.json +3 -0
  177. package/index.css +3 -0
  178. package/index.js +3 -0
  179. package/index.mjs +3 -0
  180. package/lint.log +3 -3
  181. package/package.json +74 -55
  182. package/postcss.config.js +17 -0
  183. package/scripts/README.md +1 -1
  184. package/scripts/generate-bundle.js +13 -12
  185. package/scripts/generate-images.js +34 -23
  186. package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss} +14 -12
  187. package/src/sass/avatar/avatar.scss +134 -0
  188. package/src/sass/badge/badge.scss +21 -0
  189. package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss} +25 -14
  190. package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js +12 -12
  191. package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js +15 -15
  192. package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js +5 -5
  193. package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js +12 -12
  194. package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js +15 -15
  195. package/src/{less → sass}/breadcrumbs/stories/links.stories.js +5 -5
  196. package/src/sass/bundles/skin-default.scss +9 -0
  197. package/src/sass/bundles/skin-full.scss +10 -0
  198. package/src/sass/bundles/skin-headless.scss +72 -0
  199. package/src/{less/button/button.less → sass/button/button.scss} +185 -71
  200. package/src/{less → sass}/button/stories/button/base.stories.js +5 -5
  201. package/src/{less → sass}/button/stories/button/borderless.stories.js +4 -4
  202. package/src/{less → sass}/button/stories/button/cascade.stories.js +3 -3
  203. package/src/{less → sass}/button/stories/button/dimensions.stories.js +2 -2
  204. package/src/{less → sass}/button/stories/button/primary.stories.js +4 -4
  205. package/src/{less → sass}/button/stories/button/secondary.stories.js +4 -4
  206. package/src/{less → sass}/button/stories/button/tertiary.stories.js +4 -4
  207. package/src/{less → sass}/button/stories/button/text-spacing.stories.js +1 -1
  208. package/src/{less → sass}/button/stories/destructive-button/primary.stories.js +3 -3
  209. package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js +3 -3
  210. package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js +3 -3
  211. package/src/{less → sass}/button/stories/fake-button/base.stories.js +2 -2
  212. package/src/{less → sass}/button/stories/fake-button/cascade.stories.js +3 -3
  213. package/src/{less → sass}/button/stories/fake-button/dimensions.stories.js +1 -1
  214. package/src/{less → sass}/button/stories/fake-button/primary.stories.js +4 -4
  215. package/src/{less → sass}/button/stories/fake-button/secondary.stories.js +4 -4
  216. package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js +1 -1
  217. package/src/{less/calendar/calendar.less → sass/calendar/calendar.scss} +43 -18
  218. package/src/{less → sass}/calendar/stories/calendar.stories.js +6 -6
  219. package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss} +68 -58
  220. package/src/{less → sass}/carousel/stories/carousel.stories.js +25 -25
  221. package/src/sass/chart-legend/chart-legend.scss +74 -0
  222. package/src/sass/chart-legend/stories/chart-legend.stories.js +65 -0
  223. package/src/{less/checkbox/checkbox.less → sass/checkbox/checkbox.scss} +25 -24
  224. package/src/{less/chip/chip.less → sass/chip/chip.scss} +1 -1
  225. package/src/{less → sass}/chip/stories/interactive-chip.stories.js +17 -17
  226. package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss} +7 -7
  227. package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js +38 -38
  228. package/src/{less → sass}/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  229. package/src/{less/combobox/combobox.less → sass/combobox/combobox.scss} +78 -37
  230. package/src/{less → sass}/combobox/stories/combobox.stories.js +11 -11
  231. package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss} +14 -12
  232. package/src/sass/cta-button/cta-button.scss +105 -0
  233. package/src/{less → sass}/cta-button/stories/cascade.stories.js +3 -3
  234. package/src/{less → sass}/cta-button/stories/cta-button.stories.js +2 -2
  235. package/src/{less → sass}/cta-button/stories/dimensions.stories.js +2 -2
  236. package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss} +10 -6
  237. package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js +23 -7
  238. package/src/{less/details/details.less → sass/details/details.scss} +9 -5
  239. package/src/{less → sass}/details/stories/cascade.stories.js +3 -3
  240. package/src/{less → sass}/details/stories/details.stories.js +5 -5
  241. package/src/sass/donut-chart/donut-chart.scss +98 -0
  242. package/src/sass/donut-chart/stories/donut-chart.stories.js +39 -0
  243. package/src/{less/drawer-dialog/drawer-dialog.less → sass/drawer-dialog/drawer-dialog.scss} +24 -21
  244. package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js +8 -8
  245. package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss} +26 -8
  246. package/src/{less → sass}/education-notice/stories/base.stories.js +13 -13
  247. package/src/{less/eek/eek.less → sass/eek/eek.scss} +43 -42
  248. package/src/{less/field/field.less → sass/field/field.scss} +23 -13
  249. package/src/{less → sass}/field/stories/stacked.stories.js +8 -8
  250. package/src/{less → sass}/field/stories/unstacked.stories.js +4 -4
  251. package/src/sass/filter-button/filter-button.scss +112 -0
  252. package/src/{less/filter-menu/filter-menu.less → sass/filter-menu/filter-menu.scss} +30 -19
  253. package/src/{less → sass}/filter-menu/stories/filter-menu.stories.js +24 -24
  254. package/src/{less/filter-menu-button/filter-menu-button.less → sass/filter-menu-button/filter-menu-button.scss} +112 -45
  255. package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js +124 -124
  256. package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss} +31 -15
  257. package/src/{less → sass}/floating-label/stories/floating-label.stories.js +15 -15
  258. package/src/{less/fullscreen-dialog/fullscreen-dialog.less → sass/fullscreen-dialog/fullscreen-dialog.scss} +15 -11
  259. package/src/{less → sass}/fullscreen-dialog/stories/fullscreen-dialog.stories.js +5 -5
  260. package/src/sass/gh/_gh-mixins.scss +197 -0
  261. package/src/sass/global/global.scss +50 -0
  262. package/src/{less → sass}/global/stories/global.stories.js +12 -12
  263. package/src/sass/icon/icon.scss +92 -0
  264. package/src/{less → sass}/icon/stories/icon.stories.js +5 -5
  265. package/src/{less/icon-button/icon-button.less → sass/icon-button/icon-button.scss} +88 -35
  266. package/src/sass/icon-button/stories/alignment.stories.js +28 -0
  267. package/src/{less → sass}/icon-button/stories/buttons.stories.js +36 -36
  268. package/src/{less → sass}/icon-button/stories/links.stories.js +36 -36
  269. package/src/sass/image-placeholder/image-placeholder.scss +10 -0
  270. package/src/sass/infotip/infotip.scss +136 -0
  271. package/src/{less → sass}/infotip/stories/infotip.stories.js +12 -12
  272. package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss} +3 -3
  273. package/src/{less → sass}/inline-notice/stories/inline.stories.js +11 -11
  274. package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss} +62 -20
  275. package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js +40 -33
  276. package/src/sass/link/link.scss +61 -0
  277. package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss} +20 -14
  278. package/src/{less → sass}/listbox/stories/cascade.stories.js +9 -9
  279. package/src/{less → sass}/listbox/stories/listbox.stories.js +18 -18
  280. package/src/sass/listbox-button/listbox-button.scss +233 -0
  281. package/src/{less → sass}/listbox-button/stories/base.stories.js +48 -48
  282. package/src/{less → sass}/listbox-button/stories/cascade.stories.js +15 -15
  283. package/src/{less → sass}/listbox-button/stories/dimensions.stories.js +5 -5
  284. package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js +38 -38
  285. package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js +15 -15
  286. package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  287. package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js +10 -10
  288. package/src/{less → sass}/listbox-button/stories/form.stories.js +15 -15
  289. package/src/{less → sass}/listbox-button/stories/subtitle.stories.js +38 -38
  290. package/src/sass/marketsans/marketsans.scss +46 -0
  291. package/src/{less/menu/menu.less → sass/menu/menu.scss} +22 -12
  292. package/src/{less → sass}/menu/stories/fake-menu.stories.js +4 -4
  293. package/src/{less → sass}/menu/stories/multiSelect.stories.js +9 -9
  294. package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss} +60 -30
  295. package/src/{less → sass}/menu-button/stories/base.stories.js +30 -30
  296. package/src/{less → sass}/menu-button/stories/cascade.stories.js +6 -6
  297. package/src/{less → sass}/menu-button/stories/dimensions.stories.js +1 -1
  298. package/src/{less → sass}/menu-button/stories/fake-menu-button.stories.js +6 -6
  299. package/src/sass/mixins/private/_bubble-mixins.scss +168 -0
  300. package/src/sass/mixins/private/_button-mixins.scss +95 -0
  301. package/src/{less/mixins/private/dialog-mixins.less → sass/mixins/private/_dialog-mixins.scss} +25 -22
  302. package/src/sass/mixins/private/_dropdown-mixins.scss +60 -0
  303. package/src/{less/mixins/private/filter-button-mixins.less → sass/mixins/private/_filter-button-mixins.scss} +6 -2
  304. package/src/sass/mixins/private/_filter-menu-mixins.scss +45 -0
  305. package/src/sass/mixins/private/_generated-icon-mixins.scss +517 -0
  306. package/src/sass/mixins/private/_icon-mixins.scss +12 -0
  307. package/src/sass/mixins/private/_listbox-mixins.scss +48 -0
  308. package/src/sass/mixins/private/_menu-mixins.scss +30 -0
  309. package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} +3 -3
  310. package/src/sass/mixins/private/_token-mixins.scss +124 -0
  311. package/src/sass/mixins/public/_typography-mixins.scss +136 -0
  312. package/src/sass/mixins/public/_utility-mixins.scss +62 -0
  313. package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss} +22 -22
  314. package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss} +66 -26
  315. package/src/{less → sass}/page-notice/stories/page-notice.stories.js +14 -14
  316. package/src/{less → sass}/page-notice/stories/test.stories.js +7 -7
  317. package/src/{less/pagination/pagination.less → sass/pagination/pagination.scss} +28 -14
  318. package/src/{less → sass}/pagination/stories/button-cascade.stories.js +6 -6
  319. package/src/{less → sass}/pagination/stories/buttons.stories.js +4 -4
  320. package/src/{less → sass}/pagination/stories/link-cascade.stories.js +6 -6
  321. package/src/{less → sass}/pagination/stories/links.stories.js +4 -4
  322. package/src/{less → sass}/pagination/stories/overflow.stories.js +20 -20
  323. package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss} +19 -16
  324. package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js +7 -7
  325. package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss} +47 -56
  326. package/src/{less → sass}/phone-input/stories/phone-input.stories.js +56 -56
  327. package/src/sass/progress-bar/progress-bar.scss +51 -0
  328. package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss} +19 -20
  329. package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss} +3 -3
  330. package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js +4 -4
  331. package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss} +55 -30
  332. package/src/{less/radio/radio.less → sass/radio/radio.scss} +25 -24
  333. package/src/{less/section-notice/section-notice.less → sass/section-notice/section-notice.scss} +42 -18
  334. package/src/{less → sass}/section-notice/stories/icon-16.stories.js +14 -14
  335. package/src/{less → sass}/section-notice/stories/iconless.stories.js +4 -4
  336. package/src/{less → sass}/section-notice/stories/test.stories.js +4 -4
  337. package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss} +15 -11
  338. package/src/{less → sass}/section-title/stories/rtl.stories.js +3 -3
  339. package/src/{less → sass}/section-title/stories/section-title.stories.js +4 -4
  340. package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss} +8 -8
  341. package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  342. package/src/{less/select/select.less → sass/select/select.scss} +53 -18
  343. package/src/{less → sass}/select/stories/cascade.stories.js +3 -3
  344. package/src/{less → sass}/select/stories/default.stories.js +9 -9
  345. package/src/{less → sass}/select/stories/floating-label.stories.js +4 -4
  346. package/src/{less/signal/signal.less → sass/signal/signal.scss} +9 -6
  347. package/src/{less/skeleton/skeleton.less → sass/skeleton/skeleton.scss} +23 -20
  348. package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss} +30 -11
  349. package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss} +1 -1
  350. package/src/{less → sass}/split-button/stories/base.stories.js +13 -13
  351. package/src/{less → sass}/split-button/stories/rtl.stories.js +6 -6
  352. package/src/{less → sass}/split-button/stories/size.stories.js +2 -2
  353. package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss} +14 -14
  354. package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss} +16 -15
  355. package/src/{less/switch/switch.less → sass/switch/switch.scss} +48 -20
  356. package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss} +17 -7
  357. package/src/{less → sass}/textbox/stories/icon.stories.js +34 -18
  358. package/src/{less → sass}/textbox/stories/rtl/icon.stories.js +27 -11
  359. package/src/sass/textbox/stories/rtl/textbox.stories.js +45 -0
  360. package/src/{less → sass}/textbox/stories/textbox.stories.js +24 -2
  361. package/src/sass/textbox/textbox.scss +238 -0
  362. package/src/{less/toast-dialog/toast-dialog.less → sass/toast-dialog/toast-dialog.scss} +67 -23
  363. package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js +3 -3
  364. package/src/{less → sass}/toggle-button/stories/list-layout.stories.js +3 -3
  365. package/src/{less/toggle-button/toggle-button.less → sass/toggle-button/toggle-button.scss} +6 -1
  366. package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js +471 -0
  367. package/src/sass/toggle-button-group/stories/gallery-layout.stories.js +564 -0
  368. package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js +507 -0
  369. package/src/sass/toggle-button-group/stories/list-layout.stories.js +638 -0
  370. package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js +291 -0
  371. package/src/sass/toggle-button-group/stories/minimal-layout.stories.js +289 -0
  372. package/src/sass/toggle-button-group/toggle-button-group.scss +342 -0
  373. package/src/{less → sass}/tooltip/stories/pointer.stories.js +12 -12
  374. package/src/{less → sass}/tooltip/stories/tooltip.stories.js +3 -3
  375. package/src/sass/tooltip/tooltip.scss +118 -0
  376. package/src/{less → sass}/tourtip/stories/tourtip.stories.js +5 -5
  377. package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss} +41 -33
  378. package/src/{less/typography/typography.less → sass/typography/typography.scss} +24 -21
  379. package/src/{less/utility/utility.less → sass/utility/utility.scss} +13 -13
  380. package/src/sass/variables/_variables.scss +64 -0
  381. package/src/{less/video/video.less → sass/video/video.scss} +3 -3
  382. package/src/svg/icons.svg +21 -21
  383. package/src/tokens/evo-core.css +139 -67
  384. package/src/tokens/evo-dark.css +57 -62
  385. package/src/tokens/evo-light.css +76 -76
  386. package/svg.svg +21 -21
  387. package/_cdn/skin/v17.5.0/skin-default.min.css +0 -76
  388. package/_cdn/skin/v17.5.0/skin-full.min.css +0 -160
  389. package/_cdn/skin/v17.5.0/skin-headless.min.css +0 -6
  390. package/dist/variables/variables.less +0 -70
  391. package/less[ds-4].less +0 -3
  392. package/src/less/avatar/avatar.less +0 -134
  393. package/src/less/badge/badge.less +0 -16
  394. package/src/less/bundles/skin-default.less +0 -3
  395. package/src/less/bundles/skin-full.less +0 -4
  396. package/src/less/bundles/skin-headless.less +0 -70
  397. package/src/less/cta-button/cta-button.less +0 -79
  398. package/src/less/filter-button/filter-button.less +0 -80
  399. package/src/less/global/global.less +0 -37
  400. package/src/less/icon/generated/icon.less +0 -2905
  401. package/src/less/icon/icon.less +0 -62
  402. package/src/less/icon-button/stories/alignment.stories.js +0 -28
  403. package/src/less/image-placeholder/image-placeholder.less +0 -9
  404. package/src/less/infotip/infotip.less +0 -126
  405. package/src/less/link/link.less +0 -44
  406. package/src/less/listbox-button/listbox-button.less +0 -184
  407. package/src/less/marketsans/marketsans.less +0 -45
  408. package/src/less/mixins/private/bubble-mixins.less +0 -166
  409. package/src/less/mixins/private/button-mixins.less +0 -95
  410. package/src/less/mixins/private/dropdown-mixins.less +0 -44
  411. package/src/less/mixins/private/filter-menu-mixins.less +0 -31
  412. package/src/less/mixins/private/generated-icon-mixins.less +0 -517
  413. package/src/less/mixins/private/icon-mixins.less +0 -17
  414. package/src/less/mixins/private/listbox-mixins.less +0 -35
  415. package/src/less/mixins/private/menu-mixins.less +0 -21
  416. package/src/less/mixins/private/token-mixins.less +0 -100
  417. package/src/less/progress-bar/progress-bar.less +0 -35
  418. package/src/less/textbox/stories/rtl/textbox.stories.js +0 -17
  419. package/src/less/textbox/textbox.less +0 -181
  420. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +0 -657
  421. package/src/less/toggle-button-group/stories/list-layout.stories.js +0 -611
  422. package/src/less/toggle-button-group/stories/minimal-layout.stories.js +0 -341
  423. package/src/less/toggle-button-group/toggle-button-group.less +0 -111
  424. package/src/less/tooltip/tooltip.less +0 -109
  425. package/src/less/variables/variables.less +0 -70
  426. /package/src/{less → sass}/alert-dialog/stories/alert-dialog.stories.js +0 -0
  427. /package/src/{less → sass}/avatar/stories/avatar.stories.js +0 -0
  428. /package/src/{less → sass}/badge/stories/badge.stories.js +0 -0
  429. /package/src/{less → sass}/button/stories/destructive-button/borderless.stories.js +0 -0
  430. /package/src/{less → sass}/checkbox/stories/checked.stories.js +0 -0
  431. /package/src/{less → sass}/checkbox/stories/mixed.stories.js +0 -0
  432. /package/src/{less → sass}/checkbox/stories/unchecked.stories.js +0 -0
  433. /package/src/{less → sass}/chip/stories/static-chip.stories.js +0 -0
  434. /package/src/{less → sass}/confirm-dialog/stories/confirm-dialog.stories.js +0 -0
  435. /package/src/{less → sass}/field/stories/helper-texts-stacked.stories.js +0 -0
  436. /package/src/{less → sass}/filter-button/stories/button.stories.js +0 -0
  437. /package/src/{less → sass}/filter-button/stories/group.stories.js +0 -0
  438. /package/src/{less → sass}/filter-button/stories/link.stories.js +0 -0
  439. /package/src/{less/flag/flag.less → sass/flag/flag.scss} +0 -0
  440. /package/src/{less → sass}/flag/stories/flag.stories.js +0 -0
  441. /package/src/{less → sass}/gh/gh-mixins.less +0 -0
  442. /package/src/{less → sass}/image-placeholder/stories/image-placeholder.stories.js +0 -0
  443. /package/src/{less → sass}/link/stories/link.stories.js +0 -0
  444. /package/src/{less → sass}/menu/stories/misc.stories.js +0 -0
  445. /package/src/{less → sass}/mixins/public/typography-mixins.less +0 -0
  446. /package/src/{less → sass}/mixins/public/utility-mixins.less +0 -0
  447. /package/src/{less → sass}/progress-bar/stories/progress-bar.stories.js +0 -0
  448. /package/src/{less → sass}/progress-bar-expressive/stories/progress-bar-expressive.stories.js +0 -0
  449. /package/src/{less → sass}/progress-stepper/stories/progress-stepper.stories.js +0 -0
  450. /package/src/{less → sass}/radio/stories/checked.stories.js +0 -0
  451. /package/src/{less → sass}/radio/stories/unchecked.stories.js +0 -0
  452. /package/src/{less → sass}/signal/stories/signal.stories.js +0 -0
  453. /package/src/{less → sass}/skeleton/stories/base.stories.js +0 -0
  454. /package/src/{less → sass}/skeleton/stories/composite.stories.js +0 -0
  455. /package/src/{less → sass}/skeleton/stories/rtl.stories.js +0 -0
  456. /package/src/{less → sass}/snackbar-dialog/stories/base.stories.js +0 -0
  457. /package/src/{less → sass}/snackbar-dialog/stories/font-size.stories.js +0 -0
  458. /package/src/{less → sass}/snackbar-dialog/stories/rtl.stories.js +0 -0
  459. /package/src/{less → sass}/star-rating/stories/star-rating.stories.js +0 -0
  460. /package/src/{less → sass}/star-rating-select/stories/star-rating-select.stories.js +0 -0
  461. /package/src/{less → sass}/switch/stories/form.stories.js +0 -0
  462. /package/src/{less → sass}/switch/stories/script.stories.js +0 -0
  463. /package/src/{less → sass}/tabs/stories/fake-tabs/block.stories.js +0 -0
  464. /package/src/{less → sass}/tabs/stories/fake-tabs/inlineBlock.stories.js +0 -0
  465. /package/src/{less → sass}/tabs/stories/tabs/block.stories.js +0 -0
  466. /package/src/{less → sass}/tabs/stories/tabs/inlineBlock.stories.js +0 -0
  467. /package/src/{less → sass}/toast-dialog/stories/toast-dialog.stories.js +0 -0
  468. /package/src/{less → sass}/toggle-button/stories/gallery-layout-responsive.stories.js +0 -0
  469. /package/src/{less → sass}/toggle-button/stories/minimal-layout.stories.js +0 -0
package/src/{less → sass}/listbox-button/stories/cascade.stories.js RENAMED
@@ -7,7 +7,7 @@ export const RTL = () => `
7
7
  <span class="btn__cell">
8
8
  <span class="btn__label">Color: </span>
9
9
  <span class="btn__text">Red</span>
10
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
10
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
11
11
  <use href="#icon-chevron-down-12"></use>
12
12
  </svg>
13
13
  </span>
@@ -16,25 +16,25 @@ export const RTL = () => `
16
16
  <div class="listbox-button__options" role="listbox">
17
17
  <div class="listbox-button__option" role="option" aria-selected="true">
18
18
  <span class="listbox-button__value">Red</span>
19
- <svg class="icon icon--tick-16" height="8" width="8">
19
+ <svg class="icon icon--16" height="8" width="8">
20
20
  <use href="#icon-tick-16"></use>
21
21
  </svg>
22
22
  </div>
23
23
  <div class="listbox-button__option" role="option">
24
24
  <span class="listbox-button__value">Blue</span>
25
- <svg class="icon icon--tick-16" height="8" width="8">
25
+ <svg class="icon icon--16" height="8" width="8">
26
26
  <use href="#icon-tick-16"></use>
27
27
  </svg>
28
28
  </div>
29
29
  <div class="listbox-button__option" role="option">
30
30
  <span class="listbox-button__value">Yellow</span>
31
- <svg class="icon icon--tick-16" height="8" width="8">
31
+ <svg class="icon icon--16" height="8" width="8">
32
32
  <use href="#icon-tick-16"></use>
33
33
  </svg>
34
34
  </div>
35
35
  <div class="listbox-button__option" role="option">
36
36
  <span class="listbox-button__value">Green</span>
37
- <svg class="icon icon--tick-16" height="8" width="8">
37
+ <svg class="icon icon--16" height="8" width="8">
38
38
  <use href="#icon-tick-16"></use>
39
39
  </svg>
40
40
  </div>
@@ -51,7 +51,7 @@ export const color = () => `
51
51
  <span class="btn__cell">
52
52
  <span class="btn__label">Color: </span>
53
53
  <span class="btn__text">Red</span>
54
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
54
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
55
55
  <use href="#icon-chevron-down-12"></use>
56
56
  </svg>
57
57
  </span>
@@ -60,25 +60,25 @@ export const color = () => `
60
60
  <div class="listbox-button__options" role="listbox">
61
61
  <div class="listbox-button__option" role="option" aria-selected="true">
62
62
  <span class="listbox-button__value">Red</span>
63
- <svg class="icon icon--tick-16" height="8" width="8">
63
+ <svg class="icon icon--16" height="8" width="8">
64
64
  <use href="#icon-tick-16"></use>
65
65
  </svg>
66
66
  </div>
67
67
  <div class="listbox-button__option" role="option">
68
68
  <span class="listbox-button__value">Blue</span>
69
- <svg class="icon icon--tick-16" height="8" width="8">
69
+ <svg class="icon icon--16" height="8" width="8">
70
70
  <use href="#icon-tick-16"></use>
71
71
  </svg>
72
72
  </div>
73
73
  <div class="listbox-button__option" role="option">
74
74
  <span class="listbox-button__value">Yellow</span>
75
- <svg class="icon icon--tick-16" height="8" width="8">
75
+ <svg class="icon icon--16" height="8" width="8">
76
76
  <use href="#icon-tick-16"></use>
77
77
  </svg>
78
78
  </div>
79
79
  <div class="listbox-button__option" role="option">
80
80
  <span class="listbox-button__value">Green</span>
81
- <svg class="icon icon--tick-16" height="8" width="8">
81
+ <svg class="icon icon--16" height="8" width="8">
82
82
  <use href="#icon-tick-16"></use>
83
83
  </svg>
84
84
  </div>
@@ -95,7 +95,7 @@ export const fontSize = () => `
95
95
  <span class="btn__cell">
96
96
  <span class="btn__label">Color: </span>
97
97
  <span class="btn__text">Red</span>
98
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
98
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
99
99
  <use href="#icon-chevron-down-12"></use>
100
100
  </svg>
101
101
  </span>
@@ -104,25 +104,25 @@ export const fontSize = () => `
104
104
  <div class="listbox-button__options" role="listbox">
105
105
  <div class="listbox-button__option" role="option" aria-selected="true">
106
106
  <span class="listbox-button__value">Red</span>
107
- <svg class="icon icon--tick-16" height="8" width="8">
107
+ <svg class="icon icon--16" height="8" width="8">
108
108
  <use href="#icon-tick-16"></use>
109
109
  </svg>
110
110
  </div>
111
111
  <div class="listbox-button__option" role="option">
112
112
  <span class="listbox-button__value">Blue</span>
113
- <svg class="icon icon--tick-16" height="8" width="8">
113
+ <svg class="icon icon--16" height="8" width="8">
114
114
  <use href="#icon-tick-16"></use>
115
115
  </svg>
116
116
  </div>
117
117
  <div class="listbox-button__option" role="option">
118
118
  <span class="listbox-button__value">Yellow</span>
119
- <svg class="icon icon--tick-16" height="8" width="8">
119
+ <svg class="icon icon--16" height="8" width="8">
120
120
  <use href="#icon-tick-16"></use>
121
121
  </svg>
122
122
  </div>
123
123
  <div class="listbox-button__option" role="option">
124
124
  <span class="listbox-button__value">Green</span>
125
- <svg class="icon icon--tick-16" height="8" width="8">
125
+ <svg class="icon icon--16" height="8" width="8">
126
126
  <use href="#icon-tick-16"></use>
127
127
  </svg>
128
128
  </div>
package/src/{less → sass}/listbox-button/stories/dimensions.stories.js RENAMED
@@ -6,7 +6,7 @@ export const fluid = () => `
6
6
  <span class="btn__cell">
7
7
  <span class="btn__label">Color: </span>
8
8
  <span class="btn__text">Red</span>
9
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
9
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
10
10
  <use href="#icon-chevron-down-12"></use>
11
11
  </svg>
12
12
  </span>
@@ -15,25 +15,25 @@ export const fluid = () => `
15
15
  <div class="listbox-button__options" role="listbox">
16
16
  <div class="listbox-button__option" role="option" aria-selected="true">
17
17
  <span class="listbox-button__value">Red</span>
18
- <svg class="icon icon--tick-16" height="8" width="8">
18
+ <svg class="icon icon--16" height="8" width="8">
19
19
  <use href="#icon-tick-16"></use>
20
20
  </svg>
21
21
  </div>
22
22
  <div class="listbox-button__option" role="option">
23
23
  <span class="listbox-button__value">Blue</span>
24
- <svg class="icon icon--tick-16" height="8" width="8">
24
+ <svg class="icon icon--16" height="8" width="8">
25
25
  <use href="#icon-tick-16"></use>
26
26
  </svg>
27
27
  </div>
28
28
  <div class="listbox-button__option" role="option">
29
29
  <span class="listbox-button__value">Yellow</span>
30
- <svg class="icon icon--tick-16" height="8" width="8">
30
+ <svg class="icon icon--16" height="8" width="8">
31
31
  <use href="#icon-tick-16"></use>
32
32
  </svg>
33
33
  </div>
34
34
  <div class="listbox-button__option" role="option">
35
35
  <span class="listbox-button__value">Green</span>
36
- <svg class="icon icon--tick-16" height="8" width="8">
36
+ <svg class="icon icon--16" height="8" width="8">
37
37
  <use href="#icon-tick-16"></use>
38
38
  </svg>
39
39
  </div>
package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js RENAMED
@@ -6,7 +6,7 @@ export const collapsedUnselected = () => `
6
6
  <span class="btn__cell">
7
7
  <span class="btn__label">Color: </span>
8
8
  <span class="btn__text">-</span>
9
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
9
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
10
10
  <use href="#icon-chevron-down-12"></use>
11
11
  </svg>
12
12
  </span>
@@ -15,25 +15,25 @@ export const collapsedUnselected = () => `
15
15
  <div class="listbox-button__options" role="listbox">
16
16
  <div class="listbox-button__option" role="option">
17
17
  <span class="listbox-button__value">Red</span>
18
- <svg class="icon icon--tick-16" height="8" width="8">
18
+ <svg class="icon icon--16" height="8" width="8">
19
19
  <use href="#icon-tick-16"></use>
20
20
  </svg>
21
21
  </div>
22
22
  <div class="listbox-button__option" role="option">
23
23
  <span class="listbox-button__value">Blue</span>
24
- <svg class="icon icon--tick-16" height="8" width="8">
24
+ <svg class="icon icon--16" height="8" width="8">
25
25
  <use href="#icon-tick-16"></use>
26
26
  </svg>
27
27
  </div>
28
28
  <div class="listbox-button__option" role="option">
29
29
  <span class="listbox-button__value">Yellow</span>
30
- <svg class="icon icon--tick-16" height="8" width="8">
30
+ <svg class="icon icon--16" height="8" width="8">
31
31
  <use href="#icon-tick-16"></use>
32
32
  </svg>
33
33
  </div>
34
34
  <div class="listbox-button__option" role="option">
35
35
  <span class="listbox-button__value">Green</span>
36
- <svg class="icon icon--tick-16" height="8" width="8">
36
+ <svg class="icon icon--16" height="8" width="8">
37
37
  <use href="#icon-tick-16"></use>
38
38
  </svg>
39
39
  </div>
@@ -48,7 +48,7 @@ export const expandedUnselected = () => `
48
48
  <span class="btn__cell">
49
49
  <span class="btn__label">Color: </span>
50
50
  <span class="btn__text">-</span>
51
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
51
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
52
52
  <use href="#icon-chevron-down-12"></use>
53
53
  </svg>
54
54
  </span>
@@ -57,25 +57,25 @@ export const expandedUnselected = () => `
57
57
  <div class="listbox-button__options" role="listbox">
58
58
  <div class="listbox-button__option" role="option">
59
59
  <span class="listbox-button__value">Red</span>
60
- <svg class="icon icon--tick-16" height="8" width="8">
60
+ <svg class="icon icon--16" height="8" width="8">
61
61
  <use href="#icon-tick-16"></use>
62
62
  </svg>
63
63
  </div>
64
64
  <div class="listbox-button__option" role="option">
65
65
  <span class="listbox-button__value">Blue</span>
66
- <svg class="icon icon--tick-16" height="8" width="8">
66
+ <svg class="icon icon--16" height="8" width="8">
67
67
  <use href="#icon-tick-16"></use>
68
68
  </svg>
69
69
  </div>
70
70
  <div class="listbox-button__option" role="option">
71
71
  <span class="listbox-button__value">Yellow</span>
72
- <svg class="icon icon--tick-16" height="8" width="8">
72
+ <svg class="icon icon--16" height="8" width="8">
73
73
  <use href="#icon-tick-16"></use>
74
74
  </svg>
75
75
  </div>
76
76
  <div class="listbox-button__option" role="option">
77
77
  <span class="listbox-button__value">Green</span>
78
- <svg class="icon icon--tick-16" height="8" width="8">
78
+ <svg class="icon icon--16" height="8" width="8">
79
79
  <use href="#icon-tick-16"></use>
80
80
  </svg>
81
81
  </div>
@@ -90,7 +90,7 @@ export const collapsedSelected = () => `
90
90
  <span class="btn__cell">
91
91
  <span class="btn__label">Color: </span>
92
92
  <span class="btn__text">Blue</span>
93
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
93
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
94
94
  <use href="#icon-chevron-down-12"></use>
95
95
  </svg>
96
96
  </span>
@@ -99,25 +99,25 @@ export const collapsedSelected = () => `
99
99
  <div class="listbox-button__options" role="listbox">
100
100
  <div class="listbox-button__option" role="option">
101
101
  <span class="listbox-button__value">Red</span>
102
- <svg class="icon icon--tick-16" height="8" width="8">
102
+ <svg class="icon icon--16" height="8" width="8">
103
103
  <use href="#icon-tick-16"></use>
104
104
  </svg>
105
105
  </div>
106
106
  <div class="listbox-button__option" role="option" aria-selected="true">
107
107
  <span class="listbox-button__value">Blue</span>
108
- <svg class="icon icon--tick-16" height="8" width="8">
108
+ <svg class="icon icon--16" height="8" width="8">
109
109
  <use href="#icon-tick-16"></use>
110
110
  </svg>
111
111
  </div>
112
112
  <div class="listbox-button__option" role="option">
113
113
  <span class="listbox-button__value">Yellow</span>
114
- <svg class="icon icon--tick-16" height="8" width="8">
114
+ <svg class="icon icon--16" height="8" width="8">
115
115
  <use href="#icon-tick-16"></use>
116
116
  </svg>
117
117
  </div>
118
118
  <div class="listbox-button__option" role="option">
119
119
  <span class="listbox-button__value">Green</span>
120
- <svg class="icon icon--tick-16" height="8" width="8">
120
+ <svg class="icon icon--16" height="8" width="8">
121
121
  <use href="#icon-tick-16"></use>
122
122
  </svg>
123
123
  </div>
@@ -132,7 +132,7 @@ export const expandedSelected = () => `
132
132
  <span class="btn__cell">
133
133
  <span class="btn__label">Color: </span>
134
134
  <span class="btn__text">Blue</span>
135
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
135
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
136
136
  <use href="#icon-chevron-down-12"></use>
137
137
  </svg>
138
138
  </span>
@@ -141,25 +141,25 @@ export const expandedSelected = () => `
141
141
  <div class="listbox-button__options" role="listbox">
142
142
  <div class="listbox-button__option" role="option">
143
143
  <span class="listbox-button__value">Red</span>
144
- <svg class="icon icon--tick-16" height="8" width="8">
144
+ <svg class="icon icon--16" height="8" width="8">
145
145
  <use href="#icon-tick-16"></use>
146
146
  </svg>
147
147
  </div>
148
148
  <div class="listbox-button__option" role="option" aria-selected="true">
149
149
  <span class="listbox-button__value">Blue</span>
150
- <svg class="icon icon--tick-16" height="8" width="8">
150
+ <svg class="icon icon--16" height="8" width="8">
151
151
  <use href="#icon-tick-16"></use>
152
152
  </svg>
153
153
  </div>
154
154
  <div class="listbox-button__option" role="option">
155
155
  <span class="listbox-button__value">Yellow</span>
156
- <svg class="icon icon--tick-16" height="8" width="8">
156
+ <svg class="icon icon--16" height="8" width="8">
157
157
  <use href="#icon-tick-16"></use>
158
158
  </svg>
159
159
  </div>
160
160
  <div class="listbox-button__option" role="option">
161
161
  <span class="listbox-button__value">Green</span>
162
- <svg class="icon icon--tick-16" height="8" width="8">
162
+ <svg class="icon icon--16" height="8" width="8">
163
163
  <use href="#icon-tick-16"></use>
164
164
  </svg>
165
165
  </div>
@@ -174,7 +174,7 @@ export const invalid = () => `
174
174
  <span class="btn__cell">
175
175
  <span class="btn__label">Color: </span>
176
176
  <span class="btn__text">Blue</span>
177
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
177
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
178
178
  <use href="#icon-chevron-down-12"></use>
179
179
  </svg>
180
180
  </span>
@@ -183,25 +183,25 @@ export const invalid = () => `
183
183
  <div class="listbox-button__options" role="listbox">
184
184
  <div class="listbox-button__option" role="option">
185
185
  <span class="listbox-button__value">Red</span>
186
- <svg class="icon icon--tick-16" height="8" width="8">
186
+ <svg class="icon icon--16" height="8" width="8">
187
187
  <use href="#icon-tick-16"></use>
188
188
  </svg>
189
189
  </div>
190
190
  <div class="listbox-button__option" role="option">
191
191
  <span class="listbox-button__value">Blue</span>
192
- <svg class="icon icon--tick-16" height="8" width="8">
192
+ <svg class="icon icon--16" height="8" width="8">
193
193
  <use href="#icon-tick-16"></use>
194
194
  </svg>
195
195
  </div>
196
196
  <div class="listbox-button__option" role="option">
197
197
  <span class="listbox-button__value">Yellow</span>
198
- <svg class="icon icon--tick-16" height="8" width="8">
198
+ <svg class="icon icon--16" height="8" width="8">
199
199
  <use href="#icon-tick-16"></use>
200
200
  </svg>
201
201
  </div>
202
202
  <div class="listbox-button__option" role="option">
203
203
  <span class="listbox-button__value">Green</span>
204
- <svg class="icon icon--tick-16" height="8" width="8">
204
+ <svg class="icon icon--16" height="8" width="8">
205
205
  <use href="#icon-tick-16"></use>
206
206
  </svg>
207
207
  </div>
@@ -216,7 +216,7 @@ export const longOption = () => `
216
216
  <span class="btn__cell">
217
217
  <span class="btn__label">Color: </span>
218
218
  <span class="btn__text">Red with very very very long text</span>
219
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
219
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
220
220
  <use href="#icon-chevron-down-12"></use>
221
221
  </svg>
222
222
  </span>
@@ -225,19 +225,19 @@ export const longOption = () => `
225
225
  <div class="listbox-button__options" role="listbox">
226
226
  <div class="listbox-button__option" role="option" aria-selected="true">
227
227
  <span class="listbox-button__value">Red with very very very long text</span>
228
- <svg class="icon icon--tick-16" height="8" width="8">
228
+ <svg class="icon icon--16" height="8" width="8">
229
229
  <use href="#icon-tick-16"></use>
230
230
  </svg>
231
231
  </div>
232
232
  <div class="listbox-button__option" role="option">
233
233
  <span class="listbox-button__value">Blue</span>
234
- <svg class="icon icon--tick-16" height="8" width="8">
234
+ <svg class="icon icon--16" height="8" width="8">
235
235
  <use href="#icon-tick-16"></use>
236
236
  </svg>
237
237
  </div>
238
238
  <div class="listbox-button__option" role="option">
239
239
  <span class="listbox-button__value">Yellow</span>
240
- <svg class="icon icon--tick-16" height="8" width="8">
240
+ <svg class="icon icon--16" height="8" width="8">
241
241
  <use href="#icon-tick-16"></use>
242
242
  </svg>
243
243
  </div>
@@ -252,7 +252,7 @@ export const borderless = () => `
252
252
  <span class="btn__cell">
253
253
  <span class="btn__label">Quantity: </span>
254
254
  <span class="btn__text">1</span>
255
- <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
255
+ <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
256
256
  <use href="#icon-chevron-down-12"></use>
257
257
  </svg>
258
258
  </span>
@@ -261,19 +261,19 @@ export const borderless = () => `
261
261
  <div class="listbox-button__options" role="listbox" tabindex="0">
262
262
  <div class="listbox-button__option" role="option">
263
263
  <span class="listbox-button__value">1</span>
264
- <svg class="icon icon--tick-16" height="10" width="14">
264
+ <svg class="icon icon--16" height="10" width="14">
265
265
  <use href="#icon-tick-16"></use>
266
266
  </svg>
267
267
  </div>
268
268
  <div class="listbox-button__option" role="option">
269
269
  <span class="listbox-button__value">2</span>
270
- <svg class="icon icon--tick-16" height="10" width="14">
270
+ <svg class="icon icon--16" height="10" width="14">
271
271
  <use href="#icon-tick-16"></use>
272
272
  </svg>
273
273
  </div>
274
274
  <div class="listbox-button__option" role="option">
275
275
  <span class="listbox-button__value">3</span>
276
- <svg class="icon icon--tick-16" height="10" width="14">
276
+ <svg class="icon icon--16" height="10" width="14">
277
277
  <use href="#icon-tick-16"></use>
278
278
  </svg>
279
279
  </div>
@@ -288,7 +288,7 @@ export const floatingLabelSelected = () => `
288
288
  <span class="btn__cell">
289
289
  <span class="btn__floating-label">Color:</span>
290
290
  <span class="btn__text">Blue</span>
291
- <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
291
+ <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
292
292
  <use href="#icon-chevron-down-12"></use>
293
293
  </svg>
294
294
  </span>
@@ -297,25 +297,25 @@ export const floatingLabelSelected = () => `
297
297
  <div class="listbox-button__options" role="listbox" tabindex="0">
298
298
  <div class="listbox-button__option" role="option">
299
299
  <span class="listbox-button__value">Red</span>
300
- <svg class="icon icon--tick-16" height="10" width="14">
300
+ <svg class="icon icon--16" height="10" width="14">
301
301
  <use href="#icon-tick-16"></use>
302
302
  </svg>
303
303
  </div>
304
304
  <div class="listbox-button__option" role="option" aria-selected="true">
305
305
  <span class="listbox-button__value">Blue</span>
306
- <svg class="icon icon--tick-16" height="10" width="14">
306
+ <svg class="icon icon--16" height="10" width="14">
307
307
  <use href="#icon-tick-16"></use>
308
308
  </svg>
309
309
  </div>
310
310
  <div class="listbox-button__option" role="option">
311
311
  <span class="listbox-button__value">Yellow</span>
312
- <svg class="icon icon--tick-16" height="10" width="14">
312
+ <svg class="icon icon--16" height="10" width="14">
313
313
  <use href="#icon-tick-16"></use>
314
314
  </svg>
315
315
  </div>
316
316
  <div class="listbox-button__option" role="option">
317
317
  <span class="listbox-button__value">Green</span>
318
- <svg class="icon icon--tick-16" height="10" width="14">
318
+ <svg class="icon icon--16" height="10" width="14">
319
319
  <use href="#icon-tick-16"></use>
320
320
  </svg>
321
321
  </div>
package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js RENAMED
@@ -7,7 +7,7 @@ export const RTL = () => `
7
7
  <span class="btn__cell">
8
8
  <span class="btn__label">Color: </span>
9
9
  <span class="btn__text">Red</span>
10
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
10
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
11
11
  <use href="#icon-chevron-down-12"></use>
12
12
  </svg>
13
13
  </span>
@@ -16,25 +16,25 @@ export const RTL = () => `
16
16
  <div class="listbox-button__options" role="listbox">
17
17
  <div class="listbox-button__option" role="option" aria-selected="true">
18
18
  <span class="listbox-button__value">Red</span>
19
- <svg class="icon icon--tick-16" height="8" width="8">
19
+ <svg class="icon icon--16" height="8" width="8">
20
20
  <use href="#icon-tick-16"></use>
21
21
  </svg>
22
22
  </div>
23
23
  <div class="listbox-button__option" role="option">
24
24
  <span class="listbox-button__value">Blue</span>
25
- <svg class="icon icon--tick-16" height="8" width="8">
25
+ <svg class="icon icon--16" height="8" width="8">
26
26
  <use href="#icon-tick-16"></use>
27
27
  </svg>
28
28
  </div>
29
29
  <div class="listbox-button__option" role="option">
30
30
  <span class="listbox-button__value">Yellow</span>
31
- <svg class="icon icon--tick-16" height="8" width="8">
31
+ <svg class="icon icon--16" height="8" width="8">
32
32
  <use href="#icon-tick-16"></use>
33
33
  </svg>
34
34
  </div>
35
35
  <div class="listbox-button__option" role="option">
36
36
  <span class="listbox-button__value">Green</span>
37
- <svg class="icon icon--tick-16" height="8" width="8">
37
+ <svg class="icon icon--16" height="8" width="8">
38
38
  <use href="#icon-tick-16"></use>
39
39
  </svg>
40
40
  </div>
@@ -51,7 +51,7 @@ export const color = () => `
51
51
  <span class="btn__cell">
52
52
  <span class="btn__label">Color: </span>
53
53
  <span class="btn__text">Red</span>
54
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
54
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
55
55
  <use href="#icon-chevron-down-12"></use>
56
56
  </svg>
57
57
  </span>
@@ -60,25 +60,25 @@ export const color = () => `
60
60
  <div class="listbox-button__options" role="listbox">
61
61
  <div class="listbox-button__option" role="option" aria-selected="true">
62
62
  <span class="listbox-button__value">Red</span>
63
- <svg class="icon icon--tick-16" height="8" width="8">
63
+ <svg class="icon icon--16" height="8" width="8">
64
64
  <use href="#icon-tick-16"></use>
65
65
  </svg>
66
66
  </div>
67
67
  <div class="listbox-button__option" role="option">
68
68
  <span class="listbox-button__value">Blue</span>
69
- <svg class="icon icon--tick-16" height="8" width="8">
69
+ <svg class="icon icon--16" height="8" width="8">
70
70
  <use href="#icon-tick-16"></use>
71
71
  </svg>
72
72
  </div>
73
73
  <div class="listbox-button__option" role="option">
74
74
  <span class="listbox-button__value">Yellow</span>
75
- <svg class="icon icon--tick-16" height="8" width="8">
75
+ <svg class="icon icon--16" height="8" width="8">
76
76
  <use href="#icon-tick-16"></use>
77
77
  </svg>
78
78
  </div>
79
79
  <div class="listbox-button__option" role="option">
80
80
  <span class="listbox-button__value">Green</span>
81
- <svg class="icon icon--tick-16" height="8" width="8">
81
+ <svg class="icon icon--16" height="8" width="8">
82
82
  <use href="#icon-tick-16"></use>
83
83
  </svg>
84
84
  </div>
@@ -95,7 +95,7 @@ export const fontSize = () => `
95
95
  <span class="btn__cell">
96
96
  <span class="btn__label">Color: </span>
97
97
  <span class="btn__text">Red</span>
98
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
98
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
99
99
  <use href="#icon-chevron-down-12"></use>
100
100
  </svg>
101
101
  </span>
@@ -104,25 +104,25 @@ export const fontSize = () => `
104
104
  <div class="listbox-button__options" role="listbox">
105
105
  <div class="listbox-button__option" role="option" aria-selected="true">
106
106
  <span class="listbox-button__value">Red</span>
107
- <svg class="icon icon--tick-16" height="8" width="8">
107
+ <svg class="icon icon--16" height="8" width="8">
108
108
  <use href="#icon-tick-16"></use>
109
109
  </svg>
110
110
  </div>
111
111
  <div class="listbox-button__option" role="option">
112
112
  <span class="listbox-button__value">Blue</span>
113
- <svg class="icon icon--tick-16" height="8" width="8">
113
+ <svg class="icon icon--16" height="8" width="8">
114
114
  <use href="#icon-tick-16"></use>
115
115
  </svg>
116
116
  </div>
117
117
  <div class="listbox-button__option" role="option">
118
118
  <span class="listbox-button__value">Yellow</span>
119
- <svg class="icon icon--tick-16" height="8" width="8">
119
+ <svg class="icon icon--16" height="8" width="8">
120
120
  <use href="#icon-tick-16"></use>
121
121
  </svg>
122
122
  </div>
123
123
  <div class="listbox-button__option" role="option">
124
124
  <span class="listbox-button__value">Green</span>
125
- <svg class="icon icon--tick-16" height="8" width="8">
125
+ <svg class="icon icon--16" height="8" width="8">
126
126
  <use href="#icon-tick-16"></use>
127
127
  </svg>
128
128
  </div>
package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js RENAMED
@@ -6,7 +6,7 @@ export const fluid = () => `
6
6
  <span class="btn__cell">
7
7
  <span class="btn__label">Color: </span>
8
8
  <span class="btn__text">Red</span>
9
- <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
9
+ <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
10
10
  <use href="#icon-chevron-down-12"></use>
11
11
  </svg>
12
12
  </span>
@@ -15,25 +15,25 @@ export const fluid = () => `
15
15
  <div class="listbox-button__options" role="listbox">
16
16
  <div class="listbox-button__option" role="option" aria-selected="true">
17
17
  <span class="listbox-button__value">Red</span>
18
- <svg class="icon icon--tick-16" height="8" width="8">
18
+ <svg class="icon icon--16" height="8" width="8">
19
19
  <use href="#icon-tick-16"></use>
20
20
  </svg>
21
21
  </div>
22
22
  <div class="listbox-button__option" role="option">
23
23
  <span class="listbox-button__value">Blue</span>
24
- <svg class="icon icon--tick-16" height="8" width="8">
24
+ <svg class="icon icon--16" height="8" width="8">
25
25
  <use href="#icon-tick-16"></use>
26
26
  </svg>
27
27
  </div>
28
28
  <div class="listbox-button__option" role="option">
29
29
  <span class="listbox-button__value">Yellow</span>
30
- <svg class="icon icon--tick-16" height="8" width="8">
30
+ <svg class="icon icon--16" height="8" width="8">
31
31
  <use href="#icon-tick-16"></use>
32
32
  </svg>
33
33
  </div>
34
34
  <div class="listbox-button__option" role="option">
35
35
  <span class="listbox-button__value">Green</span>
36
- <svg class="icon icon--tick-16" height="8" width="8">
36
+ <svg class="icon icon--16" height="8" width="8">
37
37
  <use href="#icon-tick-16"></use>
38
38
  </svg>
39
39
  </div>