@ebay/skin 17.5.0-next.0 → 18.0.0-next.0

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