@ukic/web-components 3.0.0 → 3.1.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 (1143) hide show
  1. package/README.md +6 -5
  2. package/dist/cjs/app-globals-3a1e7e63.js +7 -0
  3. package/dist/cjs/app-globals-3a1e7e63.js.map +1 -0
  4. package/dist/cjs/core.cjs.js +13 -11
  5. package/dist/cjs/core.cjs.js.map +1 -1
  6. package/dist/cjs/{helpers-94b33ab0.js → helpers-a0a128bd.js} +155 -50
  7. package/dist/cjs/helpers-a0a128bd.js.map +1 -0
  8. package/dist/cjs/ic-accordion-group.cjs.entry.js +38 -22
  9. package/dist/cjs/ic-accordion-group.cjs.entry.js.map +1 -1
  10. package/dist/cjs/ic-accordion.cjs.entry.js +75 -46
  11. package/dist/cjs/ic-accordion.cjs.entry.js.map +1 -1
  12. package/dist/cjs/ic-alert.cjs.entry.js +50 -30
  13. package/dist/cjs/ic-alert.cjs.entry.js.map +1 -1
  14. package/dist/cjs/ic-back-to-top.cjs.entry.js +32 -16
  15. package/dist/cjs/ic-back-to-top.cjs.entry.js.map +1 -1
  16. package/dist/cjs/ic-badge.cjs.entry.js +67 -42
  17. package/dist/cjs/ic-badge.cjs.entry.js.map +1 -1
  18. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +114 -63
  19. package/dist/cjs/ic-breadcrumb-group.cjs.entry.js.map +1 -1
  20. package/dist/cjs/ic-breadcrumb.cjs.entry.js +78 -18
  21. package/dist/cjs/ic-breadcrumb.cjs.entry.js.map +1 -1
  22. package/dist/cjs/ic-button_3.cjs.entry.js +341 -168
  23. package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
  24. package/dist/cjs/ic-card-vertical.cjs.entry.js +93 -72
  25. package/dist/cjs/ic-card-vertical.cjs.entry.js.map +1 -1
  26. package/dist/cjs/ic-checkbox-group.cjs.entry.js +51 -14
  27. package/dist/cjs/ic-checkbox-group.cjs.entry.js.map +1 -1
  28. package/dist/cjs/ic-checkbox.cjs.entry.js +55 -31
  29. package/dist/cjs/ic-checkbox.cjs.entry.js.map +1 -1
  30. package/dist/cjs/ic-chip.cjs.entry.js +64 -32
  31. package/dist/cjs/ic-chip.cjs.entry.js.map +1 -1
  32. package/dist/cjs/ic-classification-banner.cjs.entry.js +22 -6
  33. package/dist/cjs/ic-classification-banner.cjs.entry.js.map +1 -1
  34. package/dist/cjs/ic-data-list.cjs.entry.js +17 -7
  35. package/dist/cjs/ic-data-list.cjs.entry.js.map +1 -1
  36. package/dist/cjs/ic-data-row.cjs.entry.js +31 -20
  37. package/dist/cjs/ic-data-row.cjs.entry.js.map +1 -1
  38. package/dist/cjs/ic-dialog.cjs.entry.js +170 -114
  39. package/dist/cjs/ic-dialog.cjs.entry.js.map +1 -1
  40. package/dist/cjs/ic-divider.cjs.entry.js +95 -12
  41. package/dist/cjs/ic-divider.cjs.entry.js.map +1 -1
  42. package/dist/cjs/ic-empty-state.cjs.entry.js +21 -24
  43. package/dist/cjs/ic-empty-state.cjs.entry.js.map +1 -1
  44. package/dist/cjs/ic-footer-link-group.cjs.entry.js +12 -14
  45. package/dist/cjs/ic-footer-link-group.cjs.entry.js.map +1 -1
  46. package/dist/cjs/ic-footer-link.cjs.entry.js +15 -16
  47. package/dist/cjs/ic-footer-link.cjs.entry.js.map +1 -1
  48. package/dist/cjs/ic-footer.cjs.entry.js +52 -30
  49. package/dist/cjs/ic-footer.cjs.entry.js.map +1 -1
  50. package/dist/cjs/ic-hero.cjs.entry.js +35 -32
  51. package/dist/cjs/ic-hero.cjs.entry.js.map +1 -1
  52. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +40 -21
  53. package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map +1 -1
  54. package/dist/cjs/ic-input-component-container_3.cjs.entry.js +587 -244
  55. package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -1
  56. package/dist/cjs/ic-input-label_2.cjs.entry.js +65 -40
  57. package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -1
  58. package/dist/cjs/ic-link.cjs.entry.js +43 -28
  59. package/dist/cjs/ic-link.cjs.entry.js.map +1 -1
  60. package/dist/cjs/ic-menu-group.cjs.entry.js +6 -7
  61. package/dist/cjs/ic-menu-group.cjs.entry.js.map +1 -1
  62. package/dist/cjs/ic-menu-item.cjs.entry.js +41 -33
  63. package/dist/cjs/ic-menu-item.cjs.entry.js.map +1 -1
  64. package/dist/cjs/ic-navigation-button.cjs.entry.js +32 -24
  65. package/dist/cjs/ic-navigation-button.cjs.entry.js.map +1 -1
  66. package/dist/cjs/ic-navigation-group.cjs.entry.js +69 -44
  67. package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
  68. package/dist/cjs/ic-navigation-item.cjs.entry.js +115 -43
  69. package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
  70. package/dist/cjs/ic-navigation-menu.cjs.entry.js +55 -33
  71. package/dist/cjs/ic-navigation-menu.cjs.entry.js.map +1 -1
  72. package/dist/cjs/ic-page-header.cjs.entry.js +53 -31
  73. package/dist/cjs/ic-page-header.cjs.entry.js.map +1 -1
  74. package/dist/cjs/ic-pagination-item.cjs.entry.js +37 -24
  75. package/dist/cjs/ic-pagination-item.cjs.entry.js.map +1 -1
  76. package/dist/cjs/ic-pagination.cjs.entry.js +76 -36
  77. package/dist/cjs/ic-pagination.cjs.entry.js.map +1 -1
  78. package/dist/cjs/ic-popover-menu.cjs.entry.js +97 -60
  79. package/dist/cjs/ic-popover-menu.cjs.entry.js.map +1 -1
  80. package/dist/cjs/ic-radio-group.cjs.entry.js +103 -48
  81. package/dist/cjs/ic-radio-group.cjs.entry.js.map +1 -1
  82. package/dist/cjs/ic-radio-option.cjs.entry.js +70 -39
  83. package/dist/cjs/ic-radio-option.cjs.entry.js.map +1 -1
  84. package/dist/cjs/ic-search-bar.cjs.entry.js +195 -108
  85. package/dist/cjs/ic-search-bar.cjs.entry.js.map +1 -1
  86. package/dist/cjs/ic-section-container.cjs.entry.js +12 -5
  87. package/dist/cjs/ic-section-container.cjs.entry.js.map +1 -1
  88. package/dist/cjs/ic-select.cjs.entry.js +385 -163
  89. package/dist/cjs/ic-select.cjs.entry.js.map +1 -1
  90. package/dist/cjs/ic-side-navigation.cjs.entry.js +119 -79
  91. package/dist/cjs/ic-side-navigation.cjs.entry.js.map +1 -1
  92. package/dist/cjs/ic-skeleton.cjs.entry.js +15 -8
  93. package/dist/cjs/ic-skeleton.cjs.entry.js.map +1 -1
  94. package/dist/cjs/ic-skip-link.cjs.entry.js +55 -0
  95. package/dist/cjs/ic-skip-link.cjs.entry.js.map +1 -0
  96. package/dist/cjs/ic-status-tag.cjs.entry.js +30 -10
  97. package/dist/cjs/ic-status-tag.cjs.entry.js.map +1 -1
  98. package/dist/cjs/ic-step.cjs.entry.js +37 -37
  99. package/dist/cjs/ic-step.cjs.entry.js.map +1 -1
  100. package/dist/cjs/ic-stepper.cjs.entry.js +60 -36
  101. package/dist/cjs/ic-stepper.cjs.entry.js.map +1 -1
  102. package/dist/cjs/ic-switch.cjs.entry.js +63 -31
  103. package/dist/cjs/ic-switch.cjs.entry.js.map +1 -1
  104. package/dist/cjs/ic-tab-context.cjs.entry.js +112 -152
  105. package/dist/cjs/ic-tab-context.cjs.entry.js.map +1 -1
  106. package/dist/cjs/ic-tab-group.cjs.entry.js +18 -14
  107. package/dist/cjs/ic-tab-group.cjs.entry.js.map +1 -1
  108. package/dist/cjs/ic-tab-panel.cjs.entry.js +19 -15
  109. package/dist/cjs/ic-tab-panel.cjs.entry.js.map +1 -1
  110. package/dist/cjs/ic-tab.cjs.entry.js +31 -22
  111. package/dist/cjs/ic-tab.cjs.entry.js.map +1 -1
  112. package/dist/cjs/ic-text-field.cjs.entry.js +235 -87
  113. package/dist/cjs/ic-text-field.cjs.entry.js.map +1 -1
  114. package/dist/cjs/ic-theme.cjs.entry.js +52 -23
  115. package/dist/cjs/ic-theme.cjs.entry.js.map +1 -1
  116. package/dist/cjs/ic-toast-region.cjs.entry.js +8 -3
  117. package/dist/cjs/ic-toast-region.cjs.entry.js.map +1 -1
  118. package/dist/cjs/ic-toast.cjs.entry.js +30 -23
  119. package/dist/cjs/ic-toast.cjs.entry.js.map +1 -1
  120. package/dist/cjs/ic-toggle-button-group.cjs.entry.js +117 -35
  121. package/dist/cjs/ic-toggle-button-group.cjs.entry.js.map +1 -1
  122. package/dist/cjs/ic-toggle-button.cjs.entry.js +110 -23
  123. package/dist/cjs/ic-toggle-button.cjs.entry.js.map +1 -1
  124. package/dist/cjs/ic-top-navigation.cjs.entry.js +65 -35
  125. package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
  126. package/dist/cjs/ic-typography.cjs.entry.js +59 -30
  127. package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
  128. package/dist/cjs/index-d337cd8a.js +2611 -0
  129. package/dist/cjs/index-d337cd8a.js.map +1 -0
  130. package/dist/cjs/loader.cjs.js +5 -3
  131. package/dist/cjs/loader.cjs.js.map +1 -1
  132. package/dist/collection/ag-theme-icds.css +218 -0
  133. package/dist/collection/collection-manifest.json +8 -7
  134. package/dist/collection/components/ic-accordion/ic-accordion.css +27 -17
  135. package/dist/collection/components/ic-accordion/ic-accordion.js +116 -76
  136. package/dist/collection/components/ic-accordion/ic-accordion.js.map +1 -1
  137. package/dist/collection/components/ic-accordion/ic-accordion.stories.js +611 -0
  138. package/dist/collection/components/ic-accordion-group/ic-accordion-group.css +2 -8
  139. package/dist/collection/components/ic-accordion-group/ic-accordion-group.js +65 -37
  140. package/dist/collection/components/ic-accordion-group/ic-accordion-group.js.map +1 -1
  141. package/dist/collection/components/ic-alert/ic-alert.css +50 -19
  142. package/dist/collection/components/ic-alert/ic-alert.js +113 -34
  143. package/dist/collection/components/ic-alert/ic-alert.js.map +1 -1
  144. package/dist/collection/components/ic-alert/ic-alert.stories.js +271 -0
  145. package/dist/collection/components/ic-back-to-top/ic-back-to-top.css +54 -20
  146. package/dist/collection/components/ic-back-to-top/ic-back-to-top.js +86 -14
  147. package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map +1 -1
  148. package/dist/collection/components/ic-back-to-top/ic-back-to-top.stories.js +216 -0
  149. package/dist/collection/components/ic-back-to-top/ic-back-to-top.types.js.map +1 -1
  150. package/dist/collection/components/ic-badge/ic-badge.css +44 -11
  151. package/dist/collection/components/ic-badge/ic-badge.js +136 -53
  152. package/dist/collection/components/ic-badge/ic-badge.js.map +1 -1
  153. package/dist/collection/components/ic-badge/ic-badge.stories.js +1092 -0
  154. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.css +32 -8
  155. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js +142 -46
  156. package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map +1 -1
  157. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js +165 -84
  158. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js.map +1 -1
  159. package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.stories.js +362 -0
  160. package/dist/collection/components/ic-button/ic-button.css +709 -429
  161. package/dist/collection/components/ic-button/ic-button.js +331 -139
  162. package/dist/collection/components/ic-button/ic-button.js.map +1 -1
  163. package/dist/collection/components/ic-button/ic-button.stories.js +2387 -0
  164. package/dist/collection/components/ic-button/ic-button.types.js.map +1 -1
  165. package/dist/collection/components/ic-card-vertical/ic-card-vertical.css +102 -107
  166. package/dist/collection/components/ic-card-vertical/ic-card-vertical.js +160 -86
  167. package/dist/collection/components/ic-card-vertical/ic-card-vertical.js.map +1 -1
  168. package/dist/collection/components/ic-card-vertical/ic-card-vertical.stories.js +1050 -0
  169. package/dist/collection/components/ic-checkbox/ic-checkbox.css +78 -35
  170. package/dist/collection/components/ic-checkbox/ic-checkbox.js +123 -45
  171. package/dist/collection/components/ic-checkbox/ic-checkbox.js.map +1 -1
  172. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.css +20 -1
  173. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js +108 -23
  174. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map +1 -1
  175. package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js +726 -0
  176. package/dist/collection/components/ic-chip/ic-chip.css +66 -48
  177. package/dist/collection/components/ic-chip/ic-chip.js +126 -38
  178. package/dist/collection/components/ic-chip/ic-chip.js.map +1 -1
  179. package/dist/collection/components/ic-chip/ic-chip.stories.js +980 -0
  180. package/dist/collection/components/ic-classification-banner/ic-classification-banner.css +20 -10
  181. package/dist/collection/components/ic-classification-banner/ic-classification-banner.js +33 -8
  182. package/dist/collection/components/ic-classification-banner/ic-classification-banner.js.map +1 -1
  183. package/dist/collection/components/ic-classification-banner/ic-classification-banner.stories.js +131 -0
  184. package/dist/collection/components/ic-data-list/ic-data-list.css +5 -1
  185. package/dist/collection/components/ic-data-list/ic-data-list.js +47 -8
  186. package/dist/collection/components/ic-data-list/ic-data-list.js.map +1 -1
  187. package/dist/collection/components/ic-data-list/ic-data-list.stories.js +493 -0
  188. package/dist/collection/components/ic-data-row/ic-data-row.css +5 -2
  189. package/dist/collection/components/ic-data-row/ic-data-row.js +64 -21
  190. package/dist/collection/components/ic-data-row/ic-data-row.js.map +1 -1
  191. package/dist/collection/components/ic-dialog/ic-dialog.css +16 -9
  192. package/dist/collection/components/ic-dialog/ic-dialog.js +248 -144
  193. package/dist/collection/components/ic-dialog/ic-dialog.js.map +1 -1
  194. package/dist/collection/components/ic-dialog/ic-dialog.stories.js +1118 -0
  195. package/dist/collection/components/ic-divider/ic-divider.css +295 -4
  196. package/dist/collection/components/ic-divider/ic-divider.js +272 -12
  197. package/dist/collection/components/ic-divider/ic-divider.js.map +1 -1
  198. package/dist/collection/components/ic-divider/ic-divider.stories.js +394 -0
  199. package/dist/collection/components/ic-divider/ic-divider.types.js +2 -0
  200. package/dist/collection/components/ic-divider/ic-divider.types.js.map +1 -0
  201. package/dist/collection/components/ic-empty-state/ic-empty-state.css +17 -2
  202. package/dist/collection/components/ic-empty-state/ic-empty-state.js +63 -28
  203. package/dist/collection/components/ic-empty-state/ic-empty-state.js.map +1 -1
  204. package/dist/collection/components/ic-empty-state/ic-empty-state.stories.js +404 -0
  205. package/dist/collection/components/ic-footer/ic-footer.css +25 -17
  206. package/dist/collection/components/ic-footer/ic-footer.js +72 -38
  207. package/dist/collection/components/ic-footer/ic-footer.js.map +1 -1
  208. package/dist/collection/components/ic-footer/ic-footer.stories.js +384 -0
  209. package/dist/collection/components/ic-footer-link/ic-footer-link.css +28 -5
  210. package/dist/collection/components/ic-footer-link/ic-footer-link.js +32 -22
  211. package/dist/collection/components/ic-footer-link/ic-footer-link.js.map +1 -1
  212. package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css +14 -18
  213. package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js +12 -12
  214. package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.js.map +1 -1
  215. package/dist/collection/components/ic-hero/ic-hero.css +25 -10
  216. package/dist/collection/components/ic-hero/ic-hero.js +66 -45
  217. package/dist/collection/components/ic-hero/ic-hero.js.map +1 -1
  218. package/dist/collection/components/ic-hero/ic-hero.stories.js +448 -0
  219. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.css +2 -6
  220. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js +97 -22
  221. package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js.map +1 -1
  222. package/dist/collection/components/ic-input-component-container/ic-input-component-container.css +51 -18
  223. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js +74 -64
  224. package/dist/collection/components/ic-input-component-container/ic-input-component-container.js.map +1 -1
  225. package/dist/collection/components/ic-input-container/ic-input-container.js +16 -6
  226. package/dist/collection/components/ic-input-container/ic-input-container.js.map +1 -1
  227. package/dist/collection/components/ic-input-label/ic-input-label.css +19 -20
  228. package/dist/collection/components/ic-input-label/ic-input-label.js +97 -41
  229. package/dist/collection/components/ic-input-label/ic-input-label.js.map +1 -1
  230. package/dist/collection/components/ic-input-validation/ic-input-validation.css +12 -3
  231. package/dist/collection/components/ic-input-validation/ic-input-validation.js +36 -19
  232. package/dist/collection/components/ic-input-validation/ic-input-validation.js.map +1 -1
  233. package/dist/collection/components/ic-link/ic-link.css +66 -25
  234. package/dist/collection/components/ic-link/ic-link.js +107 -59
  235. package/dist/collection/components/ic-link/ic-link.js.map +1 -1
  236. package/dist/collection/components/ic-link/ic-link.stories.js +85 -0
  237. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css +20 -13
  238. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js +183 -102
  239. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js.map +1 -1
  240. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.stories.js +464 -0
  241. package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.types.js.map +1 -1
  242. package/dist/collection/components/ic-menu/ic-menu.css +116 -23
  243. package/dist/collection/components/ic-menu/ic-menu.js +640 -257
  244. package/dist/collection/components/ic-menu/ic-menu.js.map +1 -1
  245. package/dist/collection/components/ic-menu/ic-menu.types.js.map +1 -1
  246. package/dist/collection/components/ic-menu-group/ic-menu-group.css +3 -2
  247. package/dist/collection/components/ic-menu-group/ic-menu-group.js +4 -5
  248. package/dist/collection/components/ic-menu-group/ic-menu-group.js.map +1 -1
  249. package/dist/collection/components/ic-menu-item/ic-menu-item.css +43 -23
  250. package/dist/collection/components/ic-menu-item/ic-menu-item.js +115 -48
  251. package/dist/collection/components/ic-menu-item/ic-menu-item.js.map +1 -1
  252. package/dist/collection/components/ic-navigation-button/ic-navigation-button.css +18 -0
  253. package/dist/collection/components/ic-navigation-button/ic-navigation-button.js +77 -29
  254. package/dist/collection/components/ic-navigation-button/ic-navigation-button.js.map +1 -1
  255. package/dist/collection/components/ic-navigation-group/ic-navigation-group.css +54 -49
  256. package/dist/collection/components/ic-navigation-group/ic-navigation-group.js +158 -47
  257. package/dist/collection/components/ic-navigation-group/ic-navigation-group.js.map +1 -1
  258. package/dist/collection/components/ic-navigation-group/ic-navigation-group.types.js +2 -0
  259. package/dist/collection/components/ic-navigation-group/ic-navigation-group.types.js.map +1 -0
  260. package/dist/collection/components/ic-navigation-item/ic-navigation-item.css +40 -64
  261. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js +181 -60
  262. package/dist/collection/components/ic-navigation-item/ic-navigation-item.js.map +1 -1
  263. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.css +13 -5
  264. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js +84 -32
  265. package/dist/collection/components/ic-navigation-menu/ic-navigation-menu.js.map +1 -1
  266. package/dist/collection/components/ic-page-header/ic-page-header.css +7 -3
  267. package/dist/collection/components/ic-page-header/ic-page-header.js +99 -35
  268. package/dist/collection/components/ic-page-header/ic-page-header.js.map +1 -1
  269. package/dist/collection/components/ic-page-header/ic-page-header.stories.js +823 -0
  270. package/dist/collection/components/ic-pagination/ic-pagination.css +24 -1
  271. package/dist/collection/components/ic-pagination/ic-pagination.js +157 -73
  272. package/dist/collection/components/ic-pagination/ic-pagination.js.map +1 -1
  273. package/dist/collection/components/ic-pagination/ic-pagination.stories.js +164 -0
  274. package/dist/collection/components/ic-pagination-item/ic-pagination-item.css +54 -15
  275. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js +99 -52
  276. package/dist/collection/components/ic-pagination-item/ic-pagination-item.js.map +1 -1
  277. package/dist/collection/components/ic-popover-menu/ic-popover-menu.css +8 -4
  278. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js +184 -69
  279. package/dist/collection/components/ic-popover-menu/ic-popover-menu.js.map +1 -1
  280. package/dist/collection/components/ic-popover-menu/ic-popover-menu.stories.js +573 -0
  281. package/dist/collection/components/ic-radio-group/ic-radio-group.css +17 -1
  282. package/dist/collection/components/ic-radio-group/ic-radio-group.js +162 -59
  283. package/dist/collection/components/ic-radio-group/ic-radio-group.js.map +1 -1
  284. package/dist/collection/components/ic-radio-group/ic-radio-group.stories.js +474 -0
  285. package/dist/collection/components/ic-radio-option/ic-radio-option.css +58 -27
  286. package/dist/collection/components/ic-radio-option/ic-radio-option.js +130 -47
  287. package/dist/collection/components/ic-radio-option/ic-radio-option.js.map +1 -1
  288. package/dist/collection/components/ic-search-bar/ic-search-bar.css +109 -16
  289. package/dist/collection/components/ic-search-bar/ic-search-bar.js +342 -147
  290. package/dist/collection/components/ic-search-bar/ic-search-bar.js.map +1 -1
  291. package/dist/collection/components/ic-search-bar/ic-search-bar.stories.js +593 -0
  292. package/dist/collection/components/ic-search-bar/ic-search-bar.types.js.map +1 -1
  293. package/dist/collection/components/ic-section-container/ic-section-container.js +15 -5
  294. package/dist/collection/components/ic-section-container/ic-section-container.js.map +1 -1
  295. package/dist/collection/components/ic-section-container/ic-section-container.stories.js +62 -0
  296. package/dist/collection/components/ic-select/ic-select.css +105 -55
  297. package/dist/collection/components/ic-select/ic-select.js +558 -212
  298. package/dist/collection/components/ic-select/ic-select.js.map +1 -1
  299. package/dist/collection/components/ic-select/ic-select_(multi).stories.js +892 -0
  300. package/dist/collection/components/ic-select/ic-select_(searchable).stories.js +965 -0
  301. package/dist/collection/components/ic-select/ic-select_(single).stories.js +790 -0
  302. package/dist/collection/components/ic-side-navigation/ic-side-navigation.css +63 -38
  303. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js +162 -100
  304. package/dist/collection/components/ic-side-navigation/ic-side-navigation.js.map +1 -1
  305. package/dist/collection/components/ic-side-navigation/ic-side-navigation.stories.js +2547 -0
  306. package/dist/collection/components/ic-side-navigation/ic-side-navigation.types.js.map +1 -1
  307. package/dist/collection/components/ic-skeleton/ic-skeleton.css +4 -27
  308. package/dist/collection/components/ic-skeleton/ic-skeleton.js +29 -13
  309. package/dist/collection/components/ic-skeleton/ic-skeleton.js.map +1 -1
  310. package/dist/collection/components/ic-skeleton/ic-skeleton.stories.js +143 -0
  311. package/dist/collection/components/ic-skip-link/ic-skip-link.css +46 -0
  312. package/dist/collection/components/ic-skip-link/ic-skip-link.js +203 -0
  313. package/dist/collection/components/ic-skip-link/ic-skip-link.js.map +1 -0
  314. package/dist/collection/components/ic-skip-link/ic-skip-link.stories.js +504 -0
  315. package/dist/collection/components/ic-status-tag/ic-status-tag.css +21 -17
  316. package/dist/collection/components/ic-status-tag/ic-status-tag.js +80 -10
  317. package/dist/collection/components/ic-status-tag/ic-status-tag.js.map +1 -1
  318. package/dist/collection/components/ic-status-tag/ic-status-tag.stories.js +196 -0
  319. package/dist/collection/components/ic-step/ic-step.css +70 -124
  320. package/dist/collection/components/ic-step/ic-step.js +95 -42
  321. package/dist/collection/components/ic-step/ic-step.js.map +1 -1
  322. package/dist/collection/components/ic-stepper/ic-stepper.js +96 -54
  323. package/dist/collection/components/ic-stepper/ic-stepper.js.map +1 -1
  324. package/dist/collection/components/ic-stepper/ic-stepper.stories.js +281 -0
  325. package/dist/collection/components/ic-switch/ic-switch.css +30 -48
  326. package/dist/collection/components/ic-switch/ic-switch.js +106 -48
  327. package/dist/collection/components/ic-switch/ic-switch.js.map +1 -1
  328. package/dist/collection/components/ic-switch/ic-switch.stories.js +149 -0
  329. package/dist/collection/components/ic-tab/ic-tab.css +53 -17
  330. package/dist/collection/components/ic-tab/ic-tab.js +97 -51
  331. package/dist/collection/components/ic-tab/ic-tab.js.map +1 -1
  332. package/dist/collection/components/ic-tab-context/ic-tab-context.js +170 -180
  333. package/dist/collection/components/ic-tab-context/ic-tab-context.js.map +1 -1
  334. package/dist/collection/components/ic-tab-context/ic-tabs.stories.js +316 -0
  335. package/dist/collection/components/ic-tab-group/ic-tab-group.css +14 -7
  336. package/dist/collection/components/ic-tab-group/ic-tab-group.js +70 -38
  337. package/dist/collection/components/ic-tab-group/ic-tab-group.js.map +1 -1
  338. package/dist/collection/components/ic-tab-panel/ic-tab-panel.css +7 -3
  339. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js +86 -29
  340. package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map +1 -1
  341. package/dist/collection/components/ic-text-field/ic-text-field.css +64 -8
  342. package/dist/collection/components/ic-text-field/ic-text-field.js +484 -154
  343. package/dist/collection/components/ic-text-field/ic-text-field.js.map +1 -1
  344. package/dist/collection/components/ic-text-field/ic-text-field.stories.js +1048 -0
  345. package/dist/collection/components/ic-theme/ic-theme.js +93 -35
  346. package/dist/collection/components/ic-theme/ic-theme.js.map +1 -1
  347. package/dist/collection/components/ic-theme/ic-theme.stories.js +434 -0
  348. package/dist/collection/components/ic-toast/ic-toast.css +41 -17
  349. package/dist/collection/components/ic-toast/ic-toast.js +49 -29
  350. package/dist/collection/components/ic-toast/ic-toast.js.map +1 -1
  351. package/dist/collection/components/ic-toast/ic-toast.stories.js +396 -0
  352. package/dist/collection/components/ic-toast-region/ic-toast-region.js +12 -5
  353. package/dist/collection/components/ic-toast-region/ic-toast-region.js.map +1 -1
  354. package/dist/collection/components/ic-toggle-button/ic-toggle-button.css +190 -58
  355. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js +226 -63
  356. package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map +1 -1
  357. package/dist/collection/components/ic-toggle-button/ic-toggle-button.stories.js +427 -0
  358. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.css +23 -16
  359. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js +228 -64
  360. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js.map +1 -1
  361. package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.stories.js +585 -0
  362. package/dist/collection/components/ic-tooltip/ic-tooltip.css +14 -5
  363. package/dist/collection/components/ic-tooltip/ic-tooltip.js +93 -36
  364. package/dist/collection/components/ic-tooltip/ic-tooltip.js.map +1 -1
  365. package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js +366 -0
  366. package/dist/collection/components/ic-top-navigation/ic-top-navigation.css +55 -21
  367. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js +122 -50
  368. package/dist/collection/components/ic-top-navigation/ic-top-navigation.js.map +1 -1
  369. package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js +1091 -0
  370. package/dist/collection/components/ic-typography/ic-typography.css +11 -7
  371. package/dist/collection/components/ic-typography/ic-typography.js +101 -32
  372. package/dist/collection/components/ic-typography/ic-typography.js.map +1 -1
  373. package/dist/collection/components/ic-typography/ic-typography.stories.js +447 -0
  374. package/dist/collection/patterns/top-nav-content-footer.stories.js +109 -0
  375. package/dist/collection/patterns/z-index.stories.js +474 -0
  376. package/dist/collection/utils/constants.js +40 -1
  377. package/dist/collection/utils/constants.js.map +1 -1
  378. package/dist/collection/utils/helpers.js +93 -43
  379. package/dist/collection/utils/helpers.js.map +1 -1
  380. package/dist/collection/utils/testa11y.helpers.js +2 -1
  381. package/dist/collection/utils/testa11y.helpers.js.map +1 -1
  382. package/dist/collection/utils/types.js +6 -6
  383. package/dist/collection/utils/types.js.map +1 -1
  384. package/dist/components/helpers.js +147 -45
  385. package/dist/components/helpers.js.map +1 -1
  386. package/dist/components/ic-accordion-group.js +38 -21
  387. package/dist/components/ic-accordion-group.js.map +1 -1
  388. package/dist/components/ic-accordion.js +76 -45
  389. package/dist/components/ic-accordion.js.map +1 -1
  390. package/dist/components/ic-alert.js +52 -30
  391. package/dist/components/ic-alert.js.map +1 -1
  392. package/dist/components/ic-back-to-top.js +33 -14
  393. package/dist/components/ic-back-to-top.js.map +1 -1
  394. package/dist/components/ic-badge.js +69 -42
  395. package/dist/components/ic-badge.js.map +1 -1
  396. package/dist/components/ic-breadcrumb-group.js +119 -64
  397. package/dist/components/ic-breadcrumb-group.js.map +1 -1
  398. package/dist/components/ic-breadcrumb2.js +81 -17
  399. package/dist/components/ic-breadcrumb2.js.map +1 -1
  400. package/dist/components/ic-button2.js +190 -79
  401. package/dist/components/ic-button2.js.map +1 -1
  402. package/dist/components/ic-card-vertical.js +98 -74
  403. package/dist/components/ic-card-vertical.js.map +1 -1
  404. package/dist/components/ic-checkbox-group.js +54 -13
  405. package/dist/components/ic-checkbox-group.js.map +1 -1
  406. package/dist/components/ic-checkbox.js +56 -29
  407. package/dist/components/ic-checkbox.js.map +1 -1
  408. package/dist/components/ic-chip.js +68 -31
  409. package/dist/components/ic-chip.js.map +1 -1
  410. package/dist/components/ic-classification-banner.js +21 -5
  411. package/dist/components/ic-classification-banner.js.map +1 -1
  412. package/dist/components/ic-data-list.js +18 -7
  413. package/dist/components/ic-data-list.js.map +1 -1
  414. package/dist/components/ic-data-row.js +31 -18
  415. package/dist/components/ic-data-row.js.map +1 -1
  416. package/dist/components/ic-dialog.js +172 -114
  417. package/dist/components/ic-dialog.js.map +1 -1
  418. package/dist/components/ic-divider2.js +110 -14
  419. package/dist/components/ic-divider2.js.map +1 -1
  420. package/dist/components/ic-empty-state.js +23 -24
  421. package/dist/components/ic-empty-state.js.map +1 -1
  422. package/dist/components/ic-footer-link-group.js +12 -13
  423. package/dist/components/ic-footer-link-group.js.map +1 -1
  424. package/dist/components/ic-footer-link.js +15 -15
  425. package/dist/components/ic-footer-link.js.map +1 -1
  426. package/dist/components/ic-footer.js +52 -30
  427. package/dist/components/ic-footer.js.map +1 -1
  428. package/dist/components/ic-hero.js +36 -33
  429. package/dist/components/ic-hero.js.map +1 -1
  430. package/dist/components/ic-horizontal-scroll2.js +41 -20
  431. package/dist/components/ic-horizontal-scroll2.js.map +1 -1
  432. package/dist/components/ic-input-component-container2.js +48 -36
  433. package/dist/components/ic-input-component-container2.js.map +1 -1
  434. package/dist/components/ic-input-container2.js +12 -5
  435. package/dist/components/ic-input-container2.js.map +1 -1
  436. package/dist/components/ic-input-label2.js +43 -24
  437. package/dist/components/ic-input-label2.js.map +1 -1
  438. package/dist/components/ic-input-validation2.js +22 -15
  439. package/dist/components/ic-input-validation2.js.map +1 -1
  440. package/dist/components/ic-link2.js +45 -29
  441. package/dist/components/ic-link2.js.map +1 -1
  442. package/dist/components/ic-loading-indicator2.js +109 -68
  443. package/dist/components/ic-loading-indicator2.js.map +1 -1
  444. package/dist/components/ic-menu-group.js +5 -5
  445. package/dist/components/ic-menu-group.js.map +1 -1
  446. package/dist/components/ic-menu-item2.js +46 -35
  447. package/dist/components/ic-menu-item2.js.map +1 -1
  448. package/dist/components/ic-menu2.js +535 -209
  449. package/dist/components/ic-menu2.js.map +1 -1
  450. package/dist/components/ic-navigation-button.js +33 -24
  451. package/dist/components/ic-navigation-button.js.map +1 -1
  452. package/dist/components/ic-navigation-group.js +72 -44
  453. package/dist/components/ic-navigation-group.js.map +1 -1
  454. package/dist/components/ic-navigation-item.js +118 -43
  455. package/dist/components/ic-navigation-item.js.map +1 -1
  456. package/dist/components/ic-navigation-menu2.js +55 -31
  457. package/dist/components/ic-navigation-menu2.js.map +1 -1
  458. package/dist/components/ic-page-header.js +53 -29
  459. package/dist/components/ic-page-header.js.map +1 -1
  460. package/dist/components/ic-pagination-item2.js +39 -23
  461. package/dist/components/ic-pagination-item2.js.map +1 -1
  462. package/dist/components/ic-pagination.js +77 -34
  463. package/dist/components/ic-pagination.js.map +1 -1
  464. package/dist/components/ic-popover-menu.js +99 -59
  465. package/dist/components/ic-popover-menu.js.map +1 -1
  466. package/dist/components/ic-radio-group.js +105 -47
  467. package/dist/components/ic-radio-group.js.map +1 -1
  468. package/dist/components/ic-radio-option.js +72 -38
  469. package/dist/components/ic-radio-option.js.map +1 -1
  470. package/dist/components/ic-search-bar.js +210 -132
  471. package/dist/components/ic-search-bar.js.map +1 -1
  472. package/dist/components/ic-section-container2.js +11 -4
  473. package/dist/components/ic-section-container2.js.map +1 -1
  474. package/dist/components/ic-select.js +388 -163
  475. package/dist/components/ic-select.js.map +1 -1
  476. package/dist/components/ic-side-navigation.js +119 -79
  477. package/dist/components/ic-side-navigation.js.map +1 -1
  478. package/dist/components/ic-skeleton.js +15 -8
  479. package/dist/components/ic-skeleton.js.map +1 -1
  480. package/dist/components/ic-skip-link.d.ts +11 -0
  481. package/dist/components/ic-skip-link.js +83 -0
  482. package/dist/components/ic-skip-link.js.map +1 -0
  483. package/dist/components/ic-status-tag.js +30 -7
  484. package/dist/components/ic-status-tag.js.map +1 -1
  485. package/dist/components/ic-step.js +37 -35
  486. package/dist/components/ic-step.js.map +1 -1
  487. package/dist/components/ic-stepper.js +61 -35
  488. package/dist/components/ic-stepper.js.map +1 -1
  489. package/dist/components/ic-switch.js +65 -31
  490. package/dist/components/ic-switch.js.map +1 -1
  491. package/dist/components/ic-tab-context.js +116 -154
  492. package/dist/components/ic-tab-context.js.map +1 -1
  493. package/dist/components/ic-tab-group.js +19 -14
  494. package/dist/components/ic-tab-group.js.map +1 -1
  495. package/dist/components/ic-tab-panel.js +22 -16
  496. package/dist/components/ic-tab-panel.js.map +1 -1
  497. package/dist/components/ic-tab.js +32 -22
  498. package/dist/components/ic-tab.js.map +1 -1
  499. package/dist/components/ic-text-field.js +504 -1
  500. package/dist/components/ic-text-field.js.map +1 -1
  501. package/dist/components/ic-theme.js +57 -25
  502. package/dist/components/ic-theme.js.map +1 -1
  503. package/dist/components/ic-toast-region.js +7 -2
  504. package/dist/components/ic-toast-region.js.map +1 -1
  505. package/dist/components/ic-toast.js +29 -22
  506. package/dist/components/ic-toast.js.map +1 -1
  507. package/dist/components/ic-toggle-button-group.js +129 -36
  508. package/dist/components/ic-toggle-button-group.js.map +1 -1
  509. package/dist/components/ic-toggle-button.js +121 -29
  510. package/dist/components/ic-toggle-button.js.map +1 -1
  511. package/dist/components/ic-tooltip2.js +47 -25
  512. package/dist/components/ic-tooltip2.js.map +1 -1
  513. package/dist/components/ic-top-navigation.js +66 -35
  514. package/dist/components/ic-top-navigation.js.map +1 -1
  515. package/dist/components/ic-typography2.js +58 -27
  516. package/dist/components/ic-typography2.js.map +1 -1
  517. package/dist/core/ag-theme-icds.css +218 -0
  518. package/dist/core/core.css +1737 -64
  519. package/dist/core/core.esm.js +1 -1
  520. package/dist/core/core.esm.js.map +1 -1
  521. package/dist/core/index.esm.js.map +1 -1
  522. package/dist/core/p-06d97789.entry.js +2 -0
  523. package/dist/core/p-06d97789.entry.js.map +1 -0
  524. package/dist/core/{p-54238d16.entry.js → p-071f4748.entry.js} +2 -2
  525. package/dist/core/p-071f4748.entry.js.map +1 -0
  526. package/dist/core/p-09070f61.entry.js +2 -0
  527. package/dist/core/p-09070f61.entry.js.map +1 -0
  528. package/dist/core/p-0c0ac69d.entry.js +2 -0
  529. package/dist/core/p-0c0ac69d.entry.js.map +1 -0
  530. package/dist/core/p-0d016565.entry.js +2 -0
  531. package/dist/core/p-0d016565.entry.js.map +1 -0
  532. package/dist/core/p-0e96d4d8.entry.js +2 -0
  533. package/dist/core/p-0e96d4d8.entry.js.map +1 -0
  534. package/dist/core/p-10cd26dc.entry.js +2 -0
  535. package/dist/core/p-10cd26dc.entry.js.map +1 -0
  536. package/dist/core/{p-a87d13b3.entry.js → p-110486f0.entry.js} +2 -2
  537. package/dist/core/p-110486f0.entry.js.map +1 -0
  538. package/dist/core/p-116ad73d.entry.js +2 -0
  539. package/dist/core/p-116ad73d.entry.js.map +1 -0
  540. package/dist/core/p-1171a945.entry.js +2 -0
  541. package/dist/core/p-1171a945.entry.js.map +1 -0
  542. package/dist/core/p-17cf7b50.entry.js +2 -0
  543. package/dist/core/p-17cf7b50.entry.js.map +1 -0
  544. package/dist/core/p-1ac08e6d.entry.js +2 -0
  545. package/dist/core/p-1ac08e6d.entry.js.map +1 -0
  546. package/dist/core/p-1f455336.entry.js +2 -0
  547. package/dist/core/p-1f455336.entry.js.map +1 -0
  548. package/dist/core/p-20c4d90b.entry.js +2 -0
  549. package/dist/core/p-20c4d90b.entry.js.map +1 -0
  550. package/dist/core/p-2537f33e.entry.js +2 -0
  551. package/dist/core/p-2537f33e.entry.js.map +1 -0
  552. package/dist/core/p-264ce7a0.entry.js +2 -0
  553. package/dist/core/p-264ce7a0.entry.js.map +1 -0
  554. package/dist/core/p-28656111.entry.js +2 -0
  555. package/dist/core/p-28656111.entry.js.map +1 -0
  556. package/dist/core/p-2b1a331b.entry.js +2 -0
  557. package/dist/core/p-2b1a331b.entry.js.map +1 -0
  558. package/dist/core/p-33243fff.entry.js +2 -0
  559. package/dist/core/p-33243fff.entry.js.map +1 -0
  560. package/dist/core/p-37df68fe.entry.js +2 -0
  561. package/dist/core/p-37df68fe.entry.js.map +1 -0
  562. package/dist/core/p-3b185c32.js.map +1 -1
  563. package/dist/core/p-426ec638.js.map +1 -1
  564. package/dist/core/p-44e32417.entry.js +2 -0
  565. package/dist/core/p-44e32417.entry.js.map +1 -0
  566. package/dist/core/p-45595f98.entry.js +2 -0
  567. package/dist/core/p-45595f98.entry.js.map +1 -0
  568. package/dist/core/p-49768069.entry.js +2 -0
  569. package/dist/core/p-49768069.entry.js.map +1 -0
  570. package/dist/core/p-4c68494c.entry.js +2 -0
  571. package/dist/core/p-4c68494c.entry.js.map +1 -0
  572. package/dist/core/p-4f2a1950.entry.js +2 -0
  573. package/dist/core/p-4f2a1950.entry.js.map +1 -0
  574. package/dist/core/p-50f4d151.entry.js +2 -0
  575. package/dist/core/p-50f4d151.entry.js.map +1 -0
  576. package/dist/core/p-55a37101.entry.js +2 -0
  577. package/dist/core/p-55a37101.entry.js.map +1 -0
  578. package/dist/core/p-5c349c9d.entry.js +2 -0
  579. package/dist/core/p-5c349c9d.entry.js.map +1 -0
  580. package/dist/core/p-5e1fd097.entry.js +2 -0
  581. package/dist/core/p-5e1fd097.entry.js.map +1 -0
  582. package/dist/core/p-68a5aaff.js.map +1 -1
  583. package/dist/core/p-69e4daec.entry.js +2 -0
  584. package/dist/core/p-69e4daec.entry.js.map +1 -0
  585. package/dist/core/p-701696aa.entry.js +2 -0
  586. package/dist/core/p-701696aa.entry.js.map +1 -0
  587. package/dist/core/p-729745d3.entry.js +2 -0
  588. package/dist/core/p-729745d3.entry.js.map +1 -0
  589. package/dist/core/p-73fc198f.entry.js +2 -0
  590. package/dist/core/p-73fc198f.entry.js.map +1 -0
  591. package/dist/core/p-74600ed8.entry.js +2 -0
  592. package/dist/core/p-74600ed8.entry.js.map +1 -0
  593. package/dist/core/p-78e7a859.entry.js +2 -0
  594. package/dist/core/p-78e7a859.entry.js.map +1 -0
  595. package/dist/core/p-7e79bd0e.entry.js +2 -0
  596. package/dist/core/p-7e79bd0e.entry.js.map +1 -0
  597. package/dist/core/p-7eaf8da8.entry.js +2 -0
  598. package/dist/core/p-7eaf8da8.entry.js.map +1 -0
  599. package/dist/core/p-811d447b.entry.js +2 -0
  600. package/dist/core/p-811d447b.entry.js.map +1 -0
  601. package/dist/core/p-85734ebf.entry.js +2 -0
  602. package/dist/core/p-85734ebf.entry.js.map +1 -0
  603. package/dist/core/p-85b7d931.entry.js +2 -0
  604. package/dist/core/p-85b7d931.entry.js.map +1 -0
  605. package/dist/core/{p-a0e4d6bd.entry.js → p-8856dff4.entry.js} +2 -2
  606. package/dist/core/p-8856dff4.entry.js.map +1 -0
  607. package/dist/core/p-8b268274.entry.js +2 -0
  608. package/dist/core/p-8b268274.entry.js.map +1 -0
  609. package/dist/core/p-8e4e97b4.js +3 -0
  610. package/dist/core/p-8e4e97b4.js.map +1 -0
  611. package/dist/core/p-972671ea.entry.js +2 -0
  612. package/dist/core/p-972671ea.entry.js.map +1 -0
  613. package/dist/core/p-98328cb9.entry.js +2 -0
  614. package/dist/core/p-98328cb9.entry.js.map +1 -0
  615. package/dist/core/p-a103068b.entry.js +2 -0
  616. package/dist/core/p-a103068b.entry.js.map +1 -0
  617. package/dist/core/p-a20a7cd3.entry.js +2 -0
  618. package/dist/core/p-a20a7cd3.entry.js.map +1 -0
  619. package/dist/core/p-a22658fb.entry.js +2 -0
  620. package/dist/core/p-a22658fb.entry.js.map +1 -0
  621. package/dist/core/p-a55e7988.entry.js +2 -0
  622. package/dist/core/p-a55e7988.entry.js.map +1 -0
  623. package/dist/core/p-a71055c9.entry.js +2 -0
  624. package/dist/core/p-a71055c9.entry.js.map +1 -0
  625. package/dist/core/p-a794b724.entry.js +2 -0
  626. package/dist/core/p-a794b724.entry.js.map +1 -0
  627. package/dist/core/p-b21b4fea.entry.js +2 -0
  628. package/dist/core/p-b21b4fea.entry.js.map +1 -0
  629. package/dist/core/p-b953b22f.entry.js +2 -0
  630. package/dist/core/p-b953b22f.entry.js.map +1 -0
  631. package/dist/core/p-c2e091d7.js.map +1 -1
  632. package/dist/core/p-c9726fbd.entry.js +2 -0
  633. package/dist/core/p-c9726fbd.entry.js.map +1 -0
  634. package/dist/core/p-d981598e.entry.js +2 -0
  635. package/dist/core/p-d981598e.entry.js.map +1 -0
  636. package/dist/core/p-d9aec0dd.entry.js +2 -0
  637. package/dist/core/p-d9aec0dd.entry.js.map +1 -0
  638. package/dist/core/p-e1255160.js +2 -0
  639. package/dist/core/p-e1255160.js.map +1 -0
  640. package/dist/core/p-ed8957da.js +2 -0
  641. package/dist/core/p-ed8957da.js.map +1 -0
  642. package/dist/core/p-f074ef5b.js.map +1 -1
  643. package/dist/core/p-f3315216.entry.js +2 -0
  644. package/dist/core/p-f3315216.entry.js.map +1 -0
  645. package/dist/core/p-f34efc17.entry.js +2 -0
  646. package/dist/core/p-f34efc17.entry.js.map +1 -0
  647. package/dist/core/p-f43f411a.entry.js +2 -0
  648. package/dist/core/p-f43f411a.entry.js.map +1 -0
  649. package/dist/core/{p-bf89c86d.entry.js → p-fa02a267.entry.js} +2 -2
  650. package/dist/core/p-fa02a267.entry.js.map +1 -0
  651. package/dist/core/p-ff995eb8.entry.js +2 -0
  652. package/dist/core/p-ff995eb8.entry.js.map +1 -0
  653. package/dist/esm/app-globals-0f993ce5.js +5 -0
  654. package/dist/esm/app-globals-0f993ce5.js.map +1 -0
  655. package/dist/esm/core.js +14 -12
  656. package/dist/esm/core.js.map +1 -1
  657. package/dist/esm/{helpers-35ac5e03.js → helpers-dd035d0d.js} +148 -46
  658. package/dist/esm/helpers-dd035d0d.js.map +1 -0
  659. package/dist/esm/ic-accordion-group.entry.js +38 -22
  660. package/dist/esm/ic-accordion-group.entry.js.map +1 -1
  661. package/dist/esm/ic-accordion.entry.js +75 -46
  662. package/dist/esm/ic-accordion.entry.js.map +1 -1
  663. package/dist/esm/ic-alert.entry.js +50 -30
  664. package/dist/esm/ic-alert.entry.js.map +1 -1
  665. package/dist/esm/ic-back-to-top.entry.js +32 -16
  666. package/dist/esm/ic-back-to-top.entry.js.map +1 -1
  667. package/dist/esm/ic-badge.entry.js +67 -42
  668. package/dist/esm/ic-badge.entry.js.map +1 -1
  669. package/dist/esm/ic-breadcrumb-group.entry.js +114 -63
  670. package/dist/esm/ic-breadcrumb-group.entry.js.map +1 -1
  671. package/dist/esm/ic-breadcrumb.entry.js +78 -18
  672. package/dist/esm/ic-breadcrumb.entry.js.map +1 -1
  673. package/dist/esm/ic-button_3.entry.js +341 -168
  674. package/dist/esm/ic-button_3.entry.js.map +1 -1
  675. package/dist/esm/ic-card-vertical.entry.js +93 -72
  676. package/dist/esm/ic-card-vertical.entry.js.map +1 -1
  677. package/dist/esm/ic-checkbox-group.entry.js +51 -14
  678. package/dist/esm/ic-checkbox-group.entry.js.map +1 -1
  679. package/dist/esm/ic-checkbox.entry.js +55 -31
  680. package/dist/esm/ic-checkbox.entry.js.map +1 -1
  681. package/dist/esm/ic-chip.entry.js +64 -32
  682. package/dist/esm/ic-chip.entry.js.map +1 -1
  683. package/dist/esm/ic-classification-banner.entry.js +22 -6
  684. package/dist/esm/ic-classification-banner.entry.js.map +1 -1
  685. package/dist/esm/ic-data-list.entry.js +17 -7
  686. package/dist/esm/ic-data-list.entry.js.map +1 -1
  687. package/dist/esm/ic-data-row.entry.js +31 -20
  688. package/dist/esm/ic-data-row.entry.js.map +1 -1
  689. package/dist/esm/ic-dialog.entry.js +170 -114
  690. package/dist/esm/ic-dialog.entry.js.map +1 -1
  691. package/dist/esm/ic-divider.entry.js +95 -12
  692. package/dist/esm/ic-divider.entry.js.map +1 -1
  693. package/dist/esm/ic-empty-state.entry.js +21 -24
  694. package/dist/esm/ic-empty-state.entry.js.map +1 -1
  695. package/dist/esm/ic-footer-link-group.entry.js +12 -14
  696. package/dist/esm/ic-footer-link-group.entry.js.map +1 -1
  697. package/dist/esm/ic-footer-link.entry.js +15 -16
  698. package/dist/esm/ic-footer-link.entry.js.map +1 -1
  699. package/dist/esm/ic-footer.entry.js +52 -30
  700. package/dist/esm/ic-footer.entry.js.map +1 -1
  701. package/dist/esm/ic-hero.entry.js +35 -32
  702. package/dist/esm/ic-hero.entry.js.map +1 -1
  703. package/dist/esm/ic-horizontal-scroll.entry.js +40 -21
  704. package/dist/esm/ic-horizontal-scroll.entry.js.map +1 -1
  705. package/dist/esm/ic-input-component-container_3.entry.js +587 -244
  706. package/dist/esm/ic-input-component-container_3.entry.js.map +1 -1
  707. package/dist/esm/ic-input-label_2.entry.js +62 -37
  708. package/dist/esm/ic-input-label_2.entry.js.map +1 -1
  709. package/dist/esm/ic-link.entry.js +43 -28
  710. package/dist/esm/ic-link.entry.js.map +1 -1
  711. package/dist/esm/ic-menu-group.entry.js +6 -7
  712. package/dist/esm/ic-menu-group.entry.js.map +1 -1
  713. package/dist/esm/ic-menu-item.entry.js +41 -33
  714. package/dist/esm/ic-menu-item.entry.js.map +1 -1
  715. package/dist/esm/ic-navigation-button.entry.js +32 -24
  716. package/dist/esm/ic-navigation-button.entry.js.map +1 -1
  717. package/dist/esm/ic-navigation-group.entry.js +69 -44
  718. package/dist/esm/ic-navigation-group.entry.js.map +1 -1
  719. package/dist/esm/ic-navigation-item.entry.js +115 -43
  720. package/dist/esm/ic-navigation-item.entry.js.map +1 -1
  721. package/dist/esm/ic-navigation-menu.entry.js +55 -33
  722. package/dist/esm/ic-navigation-menu.entry.js.map +1 -1
  723. package/dist/esm/ic-page-header.entry.js +53 -31
  724. package/dist/esm/ic-page-header.entry.js.map +1 -1
  725. package/dist/esm/ic-pagination-item.entry.js +37 -24
  726. package/dist/esm/ic-pagination-item.entry.js.map +1 -1
  727. package/dist/esm/ic-pagination.entry.js +76 -36
  728. package/dist/esm/ic-pagination.entry.js.map +1 -1
  729. package/dist/esm/ic-popover-menu.entry.js +97 -60
  730. package/dist/esm/ic-popover-menu.entry.js.map +1 -1
  731. package/dist/esm/ic-radio-group.entry.js +103 -48
  732. package/dist/esm/ic-radio-group.entry.js.map +1 -1
  733. package/dist/esm/ic-radio-option.entry.js +70 -39
  734. package/dist/esm/ic-radio-option.entry.js.map +1 -1
  735. package/dist/esm/ic-search-bar.entry.js +195 -108
  736. package/dist/esm/ic-search-bar.entry.js.map +1 -1
  737. package/dist/esm/ic-section-container.entry.js +12 -5
  738. package/dist/esm/ic-section-container.entry.js.map +1 -1
  739. package/dist/esm/ic-select.entry.js +385 -163
  740. package/dist/esm/ic-select.entry.js.map +1 -1
  741. package/dist/esm/ic-side-navigation.entry.js +119 -79
  742. package/dist/esm/ic-side-navigation.entry.js.map +1 -1
  743. package/dist/esm/ic-skeleton.entry.js +15 -8
  744. package/dist/esm/ic-skeleton.entry.js.map +1 -1
  745. package/dist/esm/ic-skip-link.entry.js +51 -0
  746. package/dist/esm/ic-skip-link.entry.js.map +1 -0
  747. package/dist/esm/ic-status-tag.entry.js +30 -10
  748. package/dist/esm/ic-status-tag.entry.js.map +1 -1
  749. package/dist/esm/ic-step.entry.js +37 -37
  750. package/dist/esm/ic-step.entry.js.map +1 -1
  751. package/dist/esm/ic-stepper.entry.js +60 -36
  752. package/dist/esm/ic-stepper.entry.js.map +1 -1
  753. package/dist/esm/ic-switch.entry.js +63 -31
  754. package/dist/esm/ic-switch.entry.js.map +1 -1
  755. package/dist/esm/ic-tab-context.entry.js +112 -152
  756. package/dist/esm/ic-tab-context.entry.js.map +1 -1
  757. package/dist/esm/ic-tab-group.entry.js +18 -14
  758. package/dist/esm/ic-tab-group.entry.js.map +1 -1
  759. package/dist/esm/ic-tab-panel.entry.js +19 -15
  760. package/dist/esm/ic-tab-panel.entry.js.map +1 -1
  761. package/dist/esm/ic-tab.entry.js +31 -22
  762. package/dist/esm/ic-tab.entry.js.map +1 -1
  763. package/dist/esm/ic-text-field.entry.js +229 -81
  764. package/dist/esm/ic-text-field.entry.js.map +1 -1
  765. package/dist/esm/ic-theme.entry.js +52 -23
  766. package/dist/esm/ic-theme.entry.js.map +1 -1
  767. package/dist/esm/ic-toast-region.entry.js +8 -3
  768. package/dist/esm/ic-toast-region.entry.js.map +1 -1
  769. package/dist/esm/ic-toast.entry.js +30 -23
  770. package/dist/esm/ic-toast.entry.js.map +1 -1
  771. package/dist/esm/ic-toggle-button-group.entry.js +117 -35
  772. package/dist/esm/ic-toggle-button-group.entry.js.map +1 -1
  773. package/dist/esm/ic-toggle-button.entry.js +110 -23
  774. package/dist/esm/ic-toggle-button.entry.js.map +1 -1
  775. package/dist/esm/ic-top-navigation.entry.js +65 -35
  776. package/dist/esm/ic-top-navigation.entry.js.map +1 -1
  777. package/dist/esm/ic-typography.entry.js +59 -30
  778. package/dist/esm/ic-typography.entry.js.map +1 -1
  779. package/dist/esm/index-a7a720e7.js +2580 -0
  780. package/dist/esm/index-a7a720e7.js.map +1 -0
  781. package/dist/esm/loader.js +6 -4
  782. package/dist/esm/loader.js.map +1 -1
  783. package/dist/types/components/ic-accordion/ic-accordion.d.ts +10 -8
  784. package/dist/types/components/ic-accordion-group/ic-accordion-group.d.ts +9 -9
  785. package/dist/types/components/ic-alert/ic-alert.d.ts +10 -2
  786. package/dist/types/components/ic-back-to-top/ic-back-to-top.d.ts +11 -2
  787. package/dist/types/components/ic-back-to-top/ic-back-to-top.types.d.ts +1 -0
  788. package/dist/types/components/ic-badge/ic-badge.d.ts +11 -5
  789. package/dist/types/components/ic-breadcrumb/ic-breadcrumb.d.ts +19 -6
  790. package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group.d.ts +16 -9
  791. package/dist/types/components/ic-button/ic-button.d.ts +19 -13
  792. package/dist/types/components/ic-button/ic-button.types.d.ts +0 -1
  793. package/dist/types/components/ic-card-vertical/ic-card-vertical.d.ts +9 -5
  794. package/dist/types/components/ic-checkbox/ic-checkbox.d.ts +17 -12
  795. package/dist/types/components/ic-checkbox-group/ic-checkbox-group.d.ts +15 -8
  796. package/dist/types/components/ic-chip/ic-chip.d.ts +13 -2
  797. package/dist/types/components/ic-data-list/ic-data-list.d.ts +6 -2
  798. package/dist/types/components/ic-data-row/ic-data-row.d.ts +7 -3
  799. package/dist/types/components/ic-dialog/ic-dialog.d.ts +21 -12
  800. package/dist/types/components/ic-divider/ic-divider.d.ts +33 -3
  801. package/dist/types/components/ic-divider/ic-divider.types.d.ts +3 -0
  802. package/dist/types/components/ic-empty-state/ic-empty-state.d.ts +5 -2
  803. package/dist/types/components/ic-footer/ic-footer.d.ts +8 -7
  804. package/dist/types/components/ic-footer-link/ic-footer-link.d.ts +3 -3
  805. package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts +3 -2
  806. package/dist/types/components/ic-hero/ic-hero.d.ts +6 -7
  807. package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts +8 -2
  808. package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts +8 -11
  809. package/dist/types/components/ic-input-label/ic-input-label.d.ts +10 -6
  810. package/dist/types/components/ic-input-validation/ic-input-validation.d.ts +4 -4
  811. package/dist/types/components/ic-link/ic-link.d.ts +10 -6
  812. package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts +12 -8
  813. package/dist/types/components/ic-loading-indicator/ic-loading-indicator.types.d.ts +1 -1
  814. package/dist/types/components/ic-menu/ic-menu.d.ts +56 -23
  815. package/dist/types/components/ic-menu/ic-menu.types.d.ts +1 -1
  816. package/dist/types/components/ic-menu-item/ic-menu-item.d.ts +13 -6
  817. package/dist/types/components/ic-navigation-button/ic-navigation-button.d.ts +8 -4
  818. package/dist/types/components/ic-navigation-group/ic-navigation-group.d.ts +25 -9
  819. package/dist/types/components/ic-navigation-group/ic-navigation-group.types.d.ts +6 -0
  820. package/dist/types/components/ic-navigation-item/ic-navigation-item.d.ts +22 -11
  821. package/dist/types/components/ic-navigation-menu/ic-navigation-menu.d.ts +10 -3
  822. package/dist/types/components/ic-page-header/ic-page-header.d.ts +5 -1
  823. package/dist/types/components/ic-pagination/ic-pagination.d.ts +19 -14
  824. package/dist/types/components/ic-pagination-item/ic-pagination-item.d.ts +14 -9
  825. package/dist/types/components/ic-popover-menu/ic-popover-menu.d.ts +13 -11
  826. package/dist/types/components/ic-radio-group/ic-radio-group.d.ts +15 -10
  827. package/dist/types/components/ic-radio-option/ic-radio-option.d.ts +16 -9
  828. package/dist/types/components/ic-search-bar/ic-search-bar.d.ts +26 -14
  829. package/dist/types/components/ic-search-bar/ic-search-bar.types.d.ts +1 -1
  830. package/dist/types/components/ic-select/ic-select.d.ts +52 -32
  831. package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts +15 -15
  832. package/dist/types/components/ic-side-navigation/ic-side-navigation.types.d.ts +2 -2
  833. package/dist/types/components/ic-skeleton/ic-skeleton.d.ts +3 -2
  834. package/dist/types/components/ic-skip-link/ic-skip-link.d.ts +33 -0
  835. package/dist/types/components/ic-status-tag/ic-status-tag.d.ts +8 -0
  836. package/dist/types/components/ic-step/ic-step.d.ts +5 -0
  837. package/dist/types/components/ic-stepper/ic-stepper.d.ts +7 -5
  838. package/dist/types/components/ic-switch/ic-switch.d.ts +8 -7
  839. package/dist/types/components/ic-tab/ic-tab.d.ts +8 -5
  840. package/dist/types/components/ic-tab-context/ic-tab-context.d.ts +19 -12
  841. package/dist/types/components/ic-tab-group/ic-tab-group.d.ts +5 -5
  842. package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts +9 -3
  843. package/dist/types/components/ic-text-field/ic-text-field.d.ts +59 -34
  844. package/dist/types/components/ic-theme/ic-theme.d.ts +15 -8
  845. package/dist/types/components/ic-toast/ic-toast.d.ts +3 -3
  846. package/dist/types/components/ic-toast-region/ic-toast-region.d.ts +2 -1
  847. package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts +17 -8
  848. package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts +21 -5
  849. package/dist/types/components/ic-tooltip/ic-tooltip.d.ts +6 -1
  850. package/dist/types/components/ic-top-navigation/ic-top-navigation.d.ts +16 -12
  851. package/dist/types/components/ic-typography/ic-typography.d.ts +6 -2
  852. package/dist/types/components.d.ts +960 -383
  853. package/dist/types/stencil-public-runtime.d.ts +9 -10
  854. package/dist/types/utils/constants.d.ts +1 -0
  855. package/dist/types/utils/helpers.d.ts +31 -17
  856. package/dist/types/utils/types.d.ts +17 -10
  857. package/hydrate/index.d.ts +53 -12
  858. package/hydrate/index.js +32876 -19763
  859. package/hydrate/index.mjs +34407 -0
  860. package/hydrate/package.json +7 -1
  861. package/loader/cdn.js +1 -3
  862. package/loader/index.cjs.js +1 -3
  863. package/loader/index.d.ts +3 -0
  864. package/loader/index.es2017.js +1 -3
  865. package/loader/index.js +1 -3
  866. package/package.json +21 -20
  867. package/vscode-data.json +1017 -653
  868. package/dist/cjs/helpers-94b33ab0.js.map +0 -1
  869. package/dist/cjs/index-f982899d.js +0 -3047
  870. package/dist/cjs/index-f982899d.js.map +0 -1
  871. package/dist/cjs/types-dc22e301.js +0 -16
  872. package/dist/cjs/types-dc22e301.js.map +0 -1
  873. package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js +0 -346
  874. package/dist/collection/components/ic-accordion/test/basic/ic-accordion.spec.js.map +0 -1
  875. package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js +0 -129
  876. package/dist/collection/components/ic-accordion-group/test/basic/ic-accordion-group.spec.js.map +0 -1
  877. package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js +0 -197
  878. package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js.map +0 -1
  879. package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js +0 -131
  880. package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js.map +0 -1
  881. package/dist/collection/components/ic-badge/test/basic/ic-badge.spec.js +0 -264
  882. package/dist/collection/components/ic-badge/test/basic/ic-badge.spec.js.map +0 -1
  883. package/dist/collection/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.js +0 -118
  884. package/dist/collection/components/ic-breadcrumb/test/basic/ic-breadcrumb.spec.js.map +0 -1
  885. package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.js +0 -219
  886. package/dist/collection/components/ic-breadcrumb-group/test/basic/ic-breadcrumb-group.spec.js.map +0 -1
  887. package/dist/collection/components/ic-button/test/basic/ic-button.spec.js +0 -332
  888. package/dist/collection/components/ic-button/test/basic/ic-button.spec.js.map +0 -1
  889. package/dist/collection/components/ic-card-vertical/test/basic/ic-card-vertical.spec.js +0 -173
  890. package/dist/collection/components/ic-card-vertical/test/basic/ic-card-vertical.spec.js.map +0 -1
  891. package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js +0 -281
  892. package/dist/collection/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.js.map +0 -1
  893. package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js +0 -169
  894. package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js.map +0 -1
  895. package/dist/collection/components/ic-classification-banner/test/basic/ic-classification-banner.spec.js +0 -188
  896. package/dist/collection/components/ic-classification-banner/test/basic/ic-classification-banner.spec.js.map +0 -1
  897. package/dist/collection/components/ic-data-list/test/basic/ic-data-list.spec.js +0 -161
  898. package/dist/collection/components/ic-data-list/test/basic/ic-data-list.spec.js.map +0 -1
  899. package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js +0 -74
  900. package/dist/collection/components/ic-data-row/test/basic/ic-data-row.spec.js.map +0 -1
  901. package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js +0 -428
  902. package/dist/collection/components/ic-dialog/test/basic/ic-dialog.spec.js.map +0 -1
  903. package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js +0 -24
  904. package/dist/collection/components/ic-divider/test/basic/ic-divider.spec.js.map +0 -1
  905. package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js +0 -140
  906. package/dist/collection/components/ic-footer/test/basic/ic-footer.spec.js.map +0 -1
  907. package/dist/collection/components/ic-footer-link/test/basic/ic-footer-link.spec.js +0 -46
  908. package/dist/collection/components/ic-footer-link/test/basic/ic-footer-link.spec.js.map +0 -1
  909. package/dist/collection/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.js +0 -66
  910. package/dist/collection/components/ic-footer-link-group/test/basic/ic-footer-link-group.spec.js.map +0 -1
  911. package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js +0 -91
  912. package/dist/collection/components/ic-hero/test/basic/ic-hero.spec.js.map +0 -1
  913. package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js +0 -180
  914. package/dist/collection/components/ic-horizontal-scroll/test/basic/ic-horizontal-scroll.spec.js.map +0 -1
  915. package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js +0 -145
  916. package/dist/collection/components/ic-input-component-container/test/basic/ic-input-component-container.spec.js.map +0 -1
  917. package/dist/collection/components/ic-input-container/test/basic/ic-input-container.spec.js +0 -38
  918. package/dist/collection/components/ic-input-container/test/basic/ic-input-container.spec.js.map +0 -1
  919. package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js +0 -98
  920. package/dist/collection/components/ic-input-label/test/basic/ic-input-label.spec.js.map +0 -1
  921. package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js +0 -89
  922. package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js.map +0 -1
  923. package/dist/collection/components/ic-link/test/basic/ic-link.spec.js +0 -217
  924. package/dist/collection/components/ic-link/test/basic/ic-link.spec.js.map +0 -1
  925. package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js +0 -148
  926. package/dist/collection/components/ic-loading-indicator/test/basic/ic-loading-indicator.spec.js.map +0 -1
  927. package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js +0 -760
  928. package/dist/collection/components/ic-menu/test/basic/ic-menu.spec.js.map +0 -1
  929. package/dist/collection/components/ic-menu-group/test/basic/ic-menu-group.spec.js +0 -94
  930. package/dist/collection/components/ic-menu-group/test/basic/ic-menu-group.spec.js.map +0 -1
  931. package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js +0 -108
  932. package/dist/collection/components/ic-menu-item/test/basic/ic-menu-item.spec.js.map +0 -1
  933. package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js +0 -95
  934. package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js.map +0 -1
  935. package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js +0 -309
  936. package/dist/collection/components/ic-navigation-group/test/basic/ic-navigation-group.spec.js.map +0 -1
  937. package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js +0 -118
  938. package/dist/collection/components/ic-navigation-item/test/basic/ic-navigation-item.spec.js.map +0 -1
  939. package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js +0 -176
  940. package/dist/collection/components/ic-navigation-menu/test/basic/ic-navigation-menu.spec.js.map +0 -1
  941. package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js +0 -291
  942. package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js.map +0 -1
  943. package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js +0 -380
  944. package/dist/collection/components/ic-pagination/test/basic/ic-pagination.spec.js.map +0 -1
  945. package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js +0 -76
  946. package/dist/collection/components/ic-pagination-item/test/basic/ic-pagination-item.spec.js.map +0 -1
  947. package/dist/collection/components/ic-popover-menu/test/basic/ic-popover-menu.spec.js +0 -398
  948. package/dist/collection/components/ic-popover-menu/test/basic/ic-popover-menu.spec.js.map +0 -1
  949. package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.e2e.js +0 -339
  950. package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.e2e.js.map +0 -1
  951. package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js +0 -380
  952. package/dist/collection/components/ic-radio-group/test/basic/ic-radio-group.spec.js.map +0 -1
  953. package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.e2e.js +0 -1106
  954. package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.e2e.js.map +0 -1
  955. package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js +0 -584
  956. package/dist/collection/components/ic-search-bar/test/basic/ic-search-bar.spec.js.map +0 -1
  957. package/dist/collection/components/ic-section-container/test/basic/ic-section-container.spec.js +0 -69
  958. package/dist/collection/components/ic-section-container/test/basic/ic-section-container.spec.js.map +0 -1
  959. package/dist/collection/components/ic-select/test/basic/ic-select.spec.js +0 -1439
  960. package/dist/collection/components/ic-select/test/basic/ic-select.spec.js.map +0 -1
  961. package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js +0 -503
  962. package/dist/collection/components/ic-side-navigation/test/basic/ic-side-navigation.spec.js.map +0 -1
  963. package/dist/collection/components/ic-skeleton/test/basic/ic-skeleton.spec.js +0 -89
  964. package/dist/collection/components/ic-skeleton/test/basic/ic-skeleton.spec.js.map +0 -1
  965. package/dist/collection/components/ic-status-tag/test/basic/ic-status-tag.spec.js +0 -43
  966. package/dist/collection/components/ic-status-tag/test/basic/ic-status-tag.spec.js.map +0 -1
  967. package/dist/collection/components/ic-step/test/basic/ic-step.spec.js +0 -176
  968. package/dist/collection/components/ic-step/test/basic/ic-step.spec.js.map +0 -1
  969. package/dist/collection/components/ic-stepper/test/basic/ic-stepper.e2e.js +0 -49
  970. package/dist/collection/components/ic-stepper/test/basic/ic-stepper.e2e.js.map +0 -1
  971. package/dist/collection/components/ic-stepper/test/basic/ic-stepper.spec.js +0 -752
  972. package/dist/collection/components/ic-stepper/test/basic/ic-stepper.spec.js.map +0 -1
  973. package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js +0 -104
  974. package/dist/collection/components/ic-switch/test/basic/ic-switch.spec.js.map +0 -1
  975. package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js +0 -159
  976. package/dist/collection/components/ic-tab/test/basic/ic-tab.spec.js.map +0 -1
  977. package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.spec.js +0 -390
  978. package/dist/collection/components/ic-tab-context/test/basic/ic-tab-context.spec.js.map +0 -1
  979. package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js +0 -50
  980. package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js.map +0 -1
  981. package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js +0 -284
  982. package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js.map +0 -1
  983. package/dist/collection/components/ic-text-field/test/basic/ic-text-field.textarea.spec.js +0 -341
  984. package/dist/collection/components/ic-text-field/test/basic/ic-text-field.textarea.spec.js.map +0 -1
  985. package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js +0 -72
  986. package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map +0 -1
  987. package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js +0 -77
  988. package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js.map +0 -1
  989. package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js +0 -314
  990. package/dist/collection/components/ic-toast/test/basic/ic-toast.spec.js.map +0 -1
  991. package/dist/collection/components/ic-toast-region/test/basic/ic-toast-region.spec.js +0 -64
  992. package/dist/collection/components/ic-toast-region/test/basic/ic-toast-region.spec.js.map +0 -1
  993. package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js +0 -116
  994. package/dist/collection/components/ic-toggle-button/test/basic/ic-toggle-button.spec.js.map +0 -1
  995. package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js +0 -150
  996. package/dist/collection/components/ic-toggle-button-group/test/ic-toggle-button-group.spec.js.map +0 -1
  997. package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js +0 -109
  998. package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.e2e.js.map +0 -1
  999. package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js +0 -307
  1000. package/dist/collection/components/ic-tooltip/test/basic/ic-tooltip.spec.js.map +0 -1
  1001. package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js +0 -314
  1002. package/dist/collection/components/ic-top-navigation/test/basic/ic-top-navigation.spec.js.map +0 -1
  1003. package/dist/collection/components/ic-typography/test/basic/ic-typography.e2e.js +0 -39
  1004. package/dist/collection/components/ic-typography/test/basic/ic-typography.e2e.js.map +0 -1
  1005. package/dist/collection/components/ic-typography/test/basic/ic-typography.spec.js +0 -393
  1006. package/dist/collection/components/ic-typography/test/basic/ic-typography.spec.js.map +0 -1
  1007. package/dist/collection/testspec.setup.js +0 -63
  1008. package/dist/collection/testspec.setup.js.map +0 -1
  1009. package/dist/components/ic-text-field2.js +0 -354
  1010. package/dist/components/ic-text-field2.js.map +0 -1
  1011. package/dist/components/types.js +0 -16
  1012. package/dist/components/types.js.map +0 -1
  1013. package/dist/core/p-05d32a4f.entry.js +0 -2
  1014. package/dist/core/p-05d32a4f.entry.js.map +0 -1
  1015. package/dist/core/p-086a6d4f.entry.js +0 -2
  1016. package/dist/core/p-086a6d4f.entry.js.map +0 -1
  1017. package/dist/core/p-0a00a786.entry.js +0 -2
  1018. package/dist/core/p-0a00a786.entry.js.map +0 -1
  1019. package/dist/core/p-145fcef3.entry.js +0 -2
  1020. package/dist/core/p-145fcef3.entry.js.map +0 -1
  1021. package/dist/core/p-15367990.entry.js +0 -2
  1022. package/dist/core/p-15367990.entry.js.map +0 -1
  1023. package/dist/core/p-1737bf2c.entry.js +0 -2
  1024. package/dist/core/p-1737bf2c.entry.js.map +0 -1
  1025. package/dist/core/p-1ace2b02.entry.js +0 -2
  1026. package/dist/core/p-1ace2b02.entry.js.map +0 -1
  1027. package/dist/core/p-1e371012.entry.js +0 -2
  1028. package/dist/core/p-1e371012.entry.js.map +0 -1
  1029. package/dist/core/p-1f227289.entry.js +0 -2
  1030. package/dist/core/p-1f227289.entry.js.map +0 -1
  1031. package/dist/core/p-24275b92.entry.js +0 -2
  1032. package/dist/core/p-24275b92.entry.js.map +0 -1
  1033. package/dist/core/p-26b7b18f.js +0 -2
  1034. package/dist/core/p-26b7b18f.js.map +0 -1
  1035. package/dist/core/p-29e6c33f.entry.js +0 -2
  1036. package/dist/core/p-29e6c33f.entry.js.map +0 -1
  1037. package/dist/core/p-2a6f01ad.entry.js +0 -2
  1038. package/dist/core/p-2a6f01ad.entry.js.map +0 -1
  1039. package/dist/core/p-2f86c53b.entry.js +0 -2
  1040. package/dist/core/p-2f86c53b.entry.js.map +0 -1
  1041. package/dist/core/p-319e40c0.entry.js +0 -2
  1042. package/dist/core/p-319e40c0.entry.js.map +0 -1
  1043. package/dist/core/p-346c6920.entry.js +0 -2
  1044. package/dist/core/p-346c6920.entry.js.map +0 -1
  1045. package/dist/core/p-4b1445b3.entry.js +0 -2
  1046. package/dist/core/p-4b1445b3.entry.js.map +0 -1
  1047. package/dist/core/p-4b621c67.entry.js +0 -2
  1048. package/dist/core/p-4b621c67.entry.js.map +0 -1
  1049. package/dist/core/p-4ca2b177.entry.js +0 -2
  1050. package/dist/core/p-4ca2b177.entry.js.map +0 -1
  1051. package/dist/core/p-54238d16.entry.js.map +0 -1
  1052. package/dist/core/p-5515ad19.entry.js +0 -2
  1053. package/dist/core/p-5515ad19.entry.js.map +0 -1
  1054. package/dist/core/p-5c8081d6.entry.js +0 -2
  1055. package/dist/core/p-5c8081d6.entry.js.map +0 -1
  1056. package/dist/core/p-5f941f3a.entry.js +0 -2
  1057. package/dist/core/p-5f941f3a.entry.js.map +0 -1
  1058. package/dist/core/p-5fd293b3.entry.js +0 -2
  1059. package/dist/core/p-5fd293b3.entry.js.map +0 -1
  1060. package/dist/core/p-60721d95.entry.js +0 -2
  1061. package/dist/core/p-60721d95.entry.js.map +0 -1
  1062. package/dist/core/p-64a5a1d8.entry.js +0 -2
  1063. package/dist/core/p-64a5a1d8.entry.js.map +0 -1
  1064. package/dist/core/p-65e36461.entry.js +0 -2
  1065. package/dist/core/p-65e36461.entry.js.map +0 -1
  1066. package/dist/core/p-66363c7d.entry.js +0 -2
  1067. package/dist/core/p-66363c7d.entry.js.map +0 -1
  1068. package/dist/core/p-69728d76.entry.js +0 -2
  1069. package/dist/core/p-69728d76.entry.js.map +0 -1
  1070. package/dist/core/p-6b328c76.entry.js +0 -2
  1071. package/dist/core/p-6b328c76.entry.js.map +0 -1
  1072. package/dist/core/p-6b5ddacd.entry.js +0 -2
  1073. package/dist/core/p-6b5ddacd.entry.js.map +0 -1
  1074. package/dist/core/p-6b5e91e2.js +0 -3
  1075. package/dist/core/p-6b5e91e2.js.map +0 -1
  1076. package/dist/core/p-7b3d6577.entry.js +0 -2
  1077. package/dist/core/p-7b3d6577.entry.js.map +0 -1
  1078. package/dist/core/p-7d45828d.entry.js +0 -2
  1079. package/dist/core/p-7d45828d.entry.js.map +0 -1
  1080. package/dist/core/p-893eca54.entry.js +0 -2
  1081. package/dist/core/p-893eca54.entry.js.map +0 -1
  1082. package/dist/core/p-8ee262a4.entry.js +0 -2
  1083. package/dist/core/p-8ee262a4.entry.js.map +0 -1
  1084. package/dist/core/p-8f93d92b.entry.js +0 -2
  1085. package/dist/core/p-8f93d92b.entry.js.map +0 -1
  1086. package/dist/core/p-90bb13d2.entry.js +0 -2
  1087. package/dist/core/p-90bb13d2.entry.js.map +0 -1
  1088. package/dist/core/p-9189a82d.entry.js +0 -2
  1089. package/dist/core/p-9189a82d.entry.js.map +0 -1
  1090. package/dist/core/p-9190a84d.entry.js +0 -2
  1091. package/dist/core/p-9190a84d.entry.js.map +0 -1
  1092. package/dist/core/p-93f50a1a.entry.js +0 -2
  1093. package/dist/core/p-93f50a1a.entry.js.map +0 -1
  1094. package/dist/core/p-9474baf3.entry.js +0 -2
  1095. package/dist/core/p-9474baf3.entry.js.map +0 -1
  1096. package/dist/core/p-9857f6b0.entry.js +0 -2
  1097. package/dist/core/p-9857f6b0.entry.js.map +0 -1
  1098. package/dist/core/p-a0e4d6bd.entry.js.map +0 -1
  1099. package/dist/core/p-a1b9a808.entry.js +0 -2
  1100. package/dist/core/p-a1b9a808.entry.js.map +0 -1
  1101. package/dist/core/p-a79bec03.entry.js +0 -2
  1102. package/dist/core/p-a79bec03.entry.js.map +0 -1
  1103. package/dist/core/p-a84a4675.entry.js +0 -2
  1104. package/dist/core/p-a84a4675.entry.js.map +0 -1
  1105. package/dist/core/p-a87d13b3.entry.js.map +0 -1
  1106. package/dist/core/p-a928c7b3.entry.js +0 -2
  1107. package/dist/core/p-a928c7b3.entry.js.map +0 -1
  1108. package/dist/core/p-bf89c86d.entry.js.map +0 -1
  1109. package/dist/core/p-d0524c73.js +0 -2
  1110. package/dist/core/p-d0524c73.js.map +0 -1
  1111. package/dist/core/p-d24410ca.entry.js +0 -2
  1112. package/dist/core/p-d24410ca.entry.js.map +0 -1
  1113. package/dist/core/p-d52ca420.entry.js +0 -2
  1114. package/dist/core/p-d52ca420.entry.js.map +0 -1
  1115. package/dist/core/p-d67a30ca.entry.js +0 -2
  1116. package/dist/core/p-d67a30ca.entry.js.map +0 -1
  1117. package/dist/core/p-de27c59e.entry.js +0 -2
  1118. package/dist/core/p-de27c59e.entry.js.map +0 -1
  1119. package/dist/core/p-dec339ba.entry.js +0 -2
  1120. package/dist/core/p-dec339ba.entry.js.map +0 -1
  1121. package/dist/core/p-e4335135.entry.js +0 -2
  1122. package/dist/core/p-e4335135.entry.js.map +0 -1
  1123. package/dist/core/p-e56a2a06.entry.js +0 -2
  1124. package/dist/core/p-e56a2a06.entry.js.map +0 -1
  1125. package/dist/core/p-e696dc2a.entry.js +0 -2
  1126. package/dist/core/p-e696dc2a.entry.js.map +0 -1
  1127. package/dist/core/p-f0501be1.entry.js +0 -2
  1128. package/dist/core/p-f0501be1.entry.js.map +0 -1
  1129. package/dist/core/p-f50462df.entry.js +0 -2
  1130. package/dist/core/p-f50462df.entry.js.map +0 -1
  1131. package/dist/core/p-feb80f37.entry.js +0 -2
  1132. package/dist/core/p-feb80f37.entry.js.map +0 -1
  1133. package/dist/esm/helpers-35ac5e03.js.map +0 -1
  1134. package/dist/esm/index-d1d2c456.js +0 -3016
  1135. package/dist/esm/index-d1d2c456.js.map +0 -1
  1136. package/dist/esm/polyfills/core-js.js +0 -11
  1137. package/dist/esm/polyfills/dom.js +0 -79
  1138. package/dist/esm/polyfills/es5-html-element.js +0 -1
  1139. package/dist/esm/polyfills/index.js +0 -34
  1140. package/dist/esm/polyfills/system.js +0 -6
  1141. package/dist/esm/types-6f6b41a5.js +0 -16
  1142. package/dist/esm/types-6f6b41a5.js.map +0 -1
  1143. package/dist/types/testspec.setup.d.ts +0 -15
@@ -0,0 +1,2387 @@
1
+ import { html } from "lit-html";
2
+
3
+ const defaultArgs = {
4
+ message: "Custom Button",
5
+ disabled: false,
6
+ loading: false,
7
+ theme: "inherit",
8
+ size: "medium",
9
+ variant: "secondary",
10
+ fullWidth: true,
11
+ iconPlacement: "right-icon",
12
+ monochrome: false,
13
+ dropdown: false,
14
+ };
15
+
16
+ export default {
17
+ title: "Web Components/Button",
18
+ component: "ic-button",
19
+ };
20
+
21
+ export const Primary = {
22
+ render: () =>
23
+ html`<div
24
+ style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
25
+ >
26
+ <div
27
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
28
+ >
29
+ <ic-typography variant="subtitle-large"> Light theme </ic-typography>
30
+ <div>
31
+ <ic-button variant="primary" theme="light" id="mybuttonid">
32
+ Primary
33
+ </ic-button>
34
+ <ic-button variant="primary" theme="light" disabled>
35
+ Disabled
36
+ </ic-button>
37
+ </div>
38
+ </div>
39
+ <div
40
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
41
+ >
42
+ <ic-typography variant="subtitle-large">
43
+ Light theme - monochrome
44
+ </ic-typography>
45
+ <div>
46
+ <ic-button variant="primary" monochrome theme="light">
47
+ Monochrome
48
+ </ic-button>
49
+ <ic-button variant="primary" disabled monochrome theme="light">
50
+ Disabled
51
+ </ic-button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ <div
56
+ style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
57
+ >
58
+ <div
59
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
60
+ >
61
+ <ic-typography variant="subtitle-large" style="color: white">
62
+ Dark theme
63
+ </ic-typography>
64
+ <div>
65
+ <ic-button variant="primary" theme="dark" id="mybuttonid">
66
+ Primary
67
+ </ic-button>
68
+ <ic-button variant="primary" theme="dark" disabled>
69
+ Disabled
70
+ </ic-button>
71
+ </div>
72
+ </div>
73
+ <div
74
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
75
+ >
76
+ <ic-typography variant="subtitle-large" style="color: white">
77
+ Dark theme - monochrome
78
+ </ic-typography>
79
+ <div>
80
+ <ic-button variant="primary" monochrome theme="dark">
81
+ Monochrome
82
+ </ic-button>
83
+ <ic-button variant="primary" disabled monochrome theme="dark">
84
+ Disabled
85
+ </ic-button>
86
+ </div>
87
+ </div>
88
+ </div>`,
89
+
90
+ name: "Primary",
91
+ };
92
+
93
+ export const Secondary = {
94
+ render: () =>
95
+ html` <div
96
+ style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
97
+ >
98
+ <div
99
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
100
+ >
101
+ <ic-typography variant="subtitle-large"> Light theme </ic-typography>
102
+ <div>
103
+ <ic-button variant="secondary" theme="light" id="mybuttonid">
104
+ Secondary
105
+ </ic-button>
106
+ <ic-button variant="secondary" theme="light" disabled>
107
+ Disabled
108
+ </ic-button>
109
+ </div>
110
+ </div>
111
+ <div
112
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
113
+ >
114
+ <ic-typography variant="subtitle-large">
115
+ Light theme - monochrome
116
+ </ic-typography>
117
+ <div>
118
+ <ic-button variant="secondary" monochrome theme="light">
119
+ Monochrome
120
+ </ic-button>
121
+ <ic-button variant="secondary" disabled monochrome theme="light">
122
+ Disabled
123
+ </ic-button>
124
+ </div>
125
+ </div>
126
+ <div
127
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
128
+ >
129
+ <ic-typography variant="subtitle-large">
130
+ Light theme - non-transparent
131
+ </ic-typography>
132
+ <div>
133
+ <ic-button
134
+ variant="secondary"
135
+ transparent-background="false"
136
+ theme="light"
137
+ >
138
+ Solid
139
+ </ic-button>
140
+ <ic-button
141
+ variant="secondary"
142
+ disabled
143
+ theme="light"
144
+ transparent-background="false"
145
+ >
146
+ Disabled
147
+ </ic-button>
148
+ </div>
149
+ </div>
150
+ <div
151
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
152
+ >
153
+ <ic-typography variant="subtitle-large">
154
+ Light theme - monochrome, non-transparent
155
+ </ic-typography>
156
+ <div>
157
+ <ic-button
158
+ variant="secondary"
159
+ theme="light"
160
+ monochrome
161
+ transparent-background="false"
162
+ >
163
+ Mono-Solid
164
+ </ic-button>
165
+ <ic-button
166
+ variant="secondary"
167
+ disabled
168
+ monochrome
169
+ theme="light"
170
+ transparent-background="false"
171
+ >
172
+ Disabled
173
+ </ic-button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div
178
+ style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
179
+ >
180
+ <div
181
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
182
+ >
183
+ <ic-typography variant="subtitle-large" style="color: white">
184
+ Dark theme
185
+ </ic-typography>
186
+ <div>
187
+ <ic-button variant="secondary" theme="dark" id="mybuttonid">
188
+ Secondary
189
+ </ic-button>
190
+ <ic-button variant="secondary" theme="dark" disabled>
191
+ Disabled
192
+ </ic-button>
193
+ </div>
194
+ </div>
195
+ <div
196
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
197
+ >
198
+ <ic-typography variant="subtitle-large" style="color: white">
199
+ Dark theme - monochrome
200
+ </ic-typography>
201
+ <div>
202
+ <ic-button variant="secondary" monochrome theme="dark">
203
+ Monochrome
204
+ </ic-button>
205
+ <ic-button variant="secondary" disabled monochrome theme="dark">
206
+ Disabled
207
+ </ic-button>
208
+ </div>
209
+ </div>
210
+ </div>`,
211
+
212
+ name: "Secondary",
213
+ };
214
+
215
+ export const Tertiary = {
216
+ render: () =>
217
+ html` <div
218
+ style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
219
+ >
220
+ <div
221
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
222
+ >
223
+ <ic-typography variant="subtitle-large"> Light theme </ic-typography>
224
+ <div>
225
+ <ic-button variant="tertiary" theme="light" id="mybuttonid">
226
+ Tertiary
227
+ </ic-button>
228
+ <ic-button variant="tertiary" theme="light" disabled>
229
+ Disabled
230
+ </ic-button>
231
+ </div>
232
+ </div>
233
+ <div
234
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
235
+ >
236
+ <ic-typography variant="subtitle-large">
237
+ Light theme - monochrome
238
+ </ic-typography>
239
+ <div>
240
+ <ic-button variant="tertiary" theme="light" monochrome>
241
+ Monochrome
242
+ </ic-button>
243
+ <ic-button variant="tertiary" disabled monochrome theme="light">
244
+ Disabled
245
+ </ic-button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div
250
+ style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
251
+ >
252
+ <div
253
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
254
+ >
255
+ <ic-typography variant="subtitle-large" style="color: white">
256
+ Dark theme
257
+ </ic-typography>
258
+ <div>
259
+ <ic-button variant="tertiary" theme="dark" id="mybuttonid">
260
+ Tertiary
261
+ </ic-button>
262
+ <ic-button variant="tertiary" theme="dark" disabled>
263
+ Disabled
264
+ </ic-button>
265
+ </div>
266
+ </div>
267
+ <div
268
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
269
+ >
270
+ <ic-typography variant="subtitle-large" style="color: white">
271
+ Dark theme - monochrome
272
+ </ic-typography>
273
+ <div>
274
+ <ic-button variant="tertiary" monochrome theme="dark">
275
+ Monochrome
276
+ </ic-button>
277
+ <ic-button variant="tertiary" disabled monochrome theme="dark">
278
+ Disabled
279
+ </ic-button>
280
+ </div>
281
+ </div>
282
+ </div>`,
283
+
284
+ name: "Tertiary",
285
+ };
286
+
287
+ export const Destructive = {
288
+ render: () =>
289
+ html` <div
290
+ style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
291
+ >
292
+ <div
293
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
294
+ >
295
+ <ic-typography variant="subtitle-large"> Light theme </ic-typography>
296
+ <div>
297
+ <ic-button variant="destructive" theme="light" id="mybuttonid">
298
+ Destructive
299
+ </ic-button>
300
+ <ic-button variant="destructive" theme="light" disabled>
301
+ Disabled
302
+ </ic-button>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ <div
307
+ style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
308
+ >
309
+ <div
310
+ style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
311
+ >
312
+ <ic-typography variant="subtitle-large" style="color: white">
313
+ Dark theme
314
+ </ic-typography>
315
+ <div>
316
+ <ic-button variant="destructive" theme="dark" id="mybuttonid">
317
+ Destructive
318
+ </ic-button>
319
+ <ic-button variant="destructive" theme="dark" disabled>
320
+ Disabled
321
+ </ic-button>
322
+ </div>
323
+ </div>
324
+ </div>`,
325
+
326
+ name: "Destructive",
327
+ };
328
+
329
+ export const IconVariants = {
330
+ render: () =>
331
+ html`<div style="display:flex; gap: 1rem; flex-direction:column;">
332
+ <div>
333
+ <ic-typography>Default</ic-typography>
334
+ <div style="display:flex; gap: 0.5rem">
335
+ <ic-button
336
+ variant="icon-primary"
337
+ aria-label="refresh"
338
+ id="testbutton"
339
+ >
340
+ <svg
341
+ xmlns="http://www.w3.org/2000/svg"
342
+ height="24px"
343
+ viewBox="0 0 24 24"
344
+ width="24px"
345
+ fill="#000000"
346
+ >
347
+ <path d="M0 0h24v24H0V0z" fill="none" />
348
+ <path
349
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
350
+ />
351
+ </svg>
352
+ </ic-button>
353
+ <ic-button
354
+ variant="icon-secondary"
355
+ aria-label="refresh"
356
+ id="testbutton"
357
+ >
358
+ <svg
359
+ xmlns="http://www.w3.org/2000/svg"
360
+ height="24px"
361
+ viewBox="0 0 24 24"
362
+ width="24px"
363
+ fill="#000000"
364
+ >
365
+ <path d="M0 0h24v24H0V0z" fill="none" />
366
+ <path
367
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
368
+ />
369
+ </svg>
370
+ </ic-button>
371
+ <ic-button
372
+ variant="icon-tertiary"
373
+ aria-label="refresh"
374
+ id="testbutton"
375
+ >
376
+ <svg
377
+ xmlns="http://www.w3.org/2000/svg"
378
+ height="24px"
379
+ viewBox="0 0 24 24"
380
+ width="24px"
381
+ fill="#000000"
382
+ >
383
+ <path d="M0 0h24v24H0V0z" fill="none" />
384
+ <path
385
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
386
+ />
387
+ </svg>
388
+ </ic-button>
389
+ <ic-button
390
+ variant="icon-destructive"
391
+ aria-label="refresh"
392
+ id="testbutton"
393
+ >
394
+ <svg
395
+ xmlns="http://www.w3.org/2000/svg"
396
+ height="24px"
397
+ viewBox="0 0 24 24"
398
+ width="24px"
399
+ fill="#000000"
400
+ >
401
+ <path d="M0 0h24v24H0V0z" fill="none" />
402
+ <path
403
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
404
+ />
405
+ </svg>
406
+ </ic-button>
407
+ </div>
408
+ </div>
409
+ <div>
410
+ <ic-typography>Small</ic-typography>
411
+ <div style="display:flex; gap: 0.5rem">
412
+ <ic-button
413
+ variant="icon-primary"
414
+ aria-label="refresh"
415
+ id="testbutton"
416
+ size="small"
417
+ >
418
+ <svg
419
+ xmlns="http://www.w3.org/2000/svg"
420
+ height="24px"
421
+ viewBox="0 0 24 24"
422
+ width="24px"
423
+ fill="#000000"
424
+ >
425
+ <path d="M0 0h24v24H0V0z" fill="none" />
426
+ <path
427
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
428
+ />
429
+ </svg>
430
+ </ic-button>
431
+ <ic-button
432
+ variant="icon-secondary"
433
+ aria-label="refresh"
434
+ id="testbutton"
435
+ size="small"
436
+ >
437
+ <svg
438
+ xmlns="http://www.w3.org/2000/svg"
439
+ height="24px"
440
+ viewBox="0 0 24 24"
441
+ width="24px"
442
+ fill="#000000"
443
+ >
444
+ <path d="M0 0h24v24H0V0z" fill="none" />
445
+ <path
446
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
447
+ />
448
+ </svg>
449
+ </ic-button>
450
+ <ic-button
451
+ variant="icon-tertiary"
452
+ aria-label="refresh"
453
+ id="testbutton"
454
+ size="small"
455
+ >
456
+ <svg
457
+ xmlns="http://www.w3.org/2000/svg"
458
+ height="24px"
459
+ viewBox="0 0 24 24"
460
+ width="24px"
461
+ fill="#000000"
462
+ >
463
+ <path d="M0 0h24v24H0V0z" fill="none" />
464
+ <path
465
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
466
+ />
467
+ </svg>
468
+ </ic-button>
469
+ <ic-button
470
+ variant="icon-destructive"
471
+ aria-label="refresh"
472
+ id="testbutton"
473
+ size="small"
474
+ >
475
+ <svg
476
+ xmlns="http://www.w3.org/2000/svg"
477
+ height="24px"
478
+ viewBox="0 0 24 24"
479
+ width="24px"
480
+ fill="#000000"
481
+ >
482
+ <path d="M0 0h24v24H0V0z" fill="none" />
483
+ <path
484
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
485
+ />
486
+ </svg>
487
+ </ic-button>
488
+ </div>
489
+ </div>
490
+ <div>
491
+ <ic-typography>Large</ic-typography>
492
+ <div style="display:flex; gap: 0.5rem">
493
+ <ic-button
494
+ variant="icon-primary"
495
+ aria-label="refresh"
496
+ id="testbutton"
497
+ size="large"
498
+ >
499
+ <svg
500
+ xmlns="http://www.w3.org/2000/svg"
501
+ height="24px"
502
+ viewBox="0 0 24 24"
503
+ width="24px"
504
+ fill="#000000"
505
+ >
506
+ <path d="M0 0h24v24H0V0z" fill="none" />
507
+ <path
508
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
509
+ />
510
+ </svg>
511
+ </ic-button>
512
+ <ic-button
513
+ variant="icon-secondary"
514
+ aria-label="refresh"
515
+ id="testbutton"
516
+ size="large"
517
+ >
518
+ <svg
519
+ xmlns="http://www.w3.org/2000/svg"
520
+ height="24px"
521
+ viewBox="0 0 24 24"
522
+ width="24px"
523
+ fill="#000000"
524
+ >
525
+ <path d="M0 0h24v24H0V0z" fill="none" />
526
+ <path
527
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
528
+ />
529
+ </svg>
530
+ </ic-button>
531
+ <ic-button
532
+ variant="icon-tertiary"
533
+ aria-label="refresh"
534
+ id="testbutton"
535
+ size="large"
536
+ >
537
+ <svg
538
+ xmlns="http://www.w3.org/2000/svg"
539
+ height="24px"
540
+ viewBox="0 0 24 24"
541
+ width="24px"
542
+ fill="#000000"
543
+ >
544
+ <path d="M0 0h24v24H0V0z" fill="none" />
545
+ <path
546
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
547
+ />
548
+ </svg>
549
+ </ic-button>
550
+ <ic-button
551
+ variant="icon-destructive"
552
+ aria-label="refresh"
553
+ id="testbutton"
554
+ size="large"
555
+ >
556
+ <svg
557
+ xmlns="http://www.w3.org/2000/svg"
558
+ height="24px"
559
+ viewBox="0 0 24 24"
560
+ width="24px"
561
+ fill="#000000"
562
+ >
563
+ <path d="M0 0h24v24H0V0z" fill="none" />
564
+ <path
565
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
566
+ />
567
+ </svg>
568
+ </ic-button>
569
+ </div>
570
+ </div>
571
+ <div>
572
+ <ic-typography>Loading</ic-typography>
573
+ <div style="display:flex; gap: 0.5rem">
574
+ <ic-button
575
+ variant="icon-primary"
576
+ theme="light"
577
+ aria-label="refresh"
578
+ id="testbutton"
579
+ loading
580
+ >
581
+ <svg
582
+ xmlns="http://www.w3.org/2000/svg"
583
+ height="24px"
584
+ viewBox="0 0 24 24"
585
+ width="24px"
586
+ fill="#000000"
587
+ >
588
+ <path d="M0 0h24v24H0V0z" fill="none" />
589
+ <path
590
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
591
+ />
592
+ </svg>
593
+ </ic-button>
594
+ <ic-button
595
+ variant="icon-secondary"
596
+ aria-label="refresh"
597
+ id="testbutton"
598
+ loading
599
+ >
600
+ <svg
601
+ xmlns="http://www.w3.org/2000/svg"
602
+ height="24px"
603
+ viewBox="0 0 24 24"
604
+ width="24px"
605
+ fill="#000000"
606
+ >
607
+ <path d="M0 0h24v24H0V0z" fill="none" />
608
+ <path
609
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
610
+ />
611
+ </svg>
612
+ </ic-button>
613
+ <ic-button
614
+ variant="icon-tertiary"
615
+ aria-label="refresh"
616
+ id="testbutton"
617
+ loading
618
+ >
619
+ <svg
620
+ xmlns="http://www.w3.org/2000/svg"
621
+ height="24px"
622
+ viewBox="0 0 24 24"
623
+ width="24px"
624
+ fill="#000000"
625
+ >
626
+ <path d="M0 0h24v24H0V0z" fill="none" />
627
+ <path
628
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
629
+ />
630
+ </svg>
631
+ </ic-button>
632
+ <ic-button
633
+ variant="icon-destructive"
634
+ aria-label="refresh"
635
+ id="testbutton"
636
+ loading
637
+ >
638
+ <svg
639
+ xmlns="http://www.w3.org/2000/svg"
640
+ height="24px"
641
+ viewBox="0 0 24 24"
642
+ width="24px"
643
+ fill="#000000"
644
+ >
645
+ <path d="M0 0h24v24H0V0z" fill="none" />
646
+ <path
647
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
648
+ />
649
+ </svg>
650
+ </ic-button>
651
+ </div>
652
+ </div>
653
+ <div>
654
+ <ic-typography>Disabled</ic-typography>
655
+ <div style="display:flex; gap: 0.5rem">
656
+ <ic-button
657
+ variant="icon-primary"
658
+ aria-label="refresh"
659
+ id="testbutton"
660
+ disabled
661
+ >
662
+ <svg
663
+ xmlns="http://www.w3.org/2000/svg"
664
+ height="24px"
665
+ viewBox="0 0 24 24"
666
+ width="24px"
667
+ fill="#000000"
668
+ >
669
+ <path d="M0 0h24v24H0V0z" fill="none" />
670
+ <path
671
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
672
+ />
673
+ </svg>
674
+ </ic-button>
675
+ <ic-button
676
+ variant="icon-secondary"
677
+ aria-label="refresh"
678
+ id="testbutton"
679
+ disabled
680
+ >
681
+ <svg
682
+ xmlns="http://www.w3.org/2000/svg"
683
+ height="24px"
684
+ viewBox="0 0 24 24"
685
+ width="24px"
686
+ fill="#000000"
687
+ >
688
+ <path d="M0 0h24v24H0V0z" fill="none" />
689
+ <path
690
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
691
+ />
692
+ </svg>
693
+ </ic-button>
694
+ <ic-button
695
+ variant="icon-tertiary"
696
+ aria-label="refresh"
697
+ id="testbutton"
698
+ disabled
699
+ >
700
+ <svg
701
+ xmlns="http://www.w3.org/2000/svg"
702
+ height="24px"
703
+ viewBox="0 0 24 24"
704
+ width="24px"
705
+ fill="#000000"
706
+ >
707
+ <path d="M0 0h24v24H0V0z" fill="none" />
708
+ <path
709
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
710
+ />
711
+ </svg>
712
+ </ic-button>
713
+ <ic-button
714
+ variant="icon-destructive"
715
+ aria-label="refresh"
716
+ id="testbutton"
717
+ disabled
718
+ >
719
+ <svg
720
+ xmlns="http://www.w3.org/2000/svg"
721
+ height="24px"
722
+ viewBox="0 0 24 24"
723
+ width="24px"
724
+ fill="#000000"
725
+ >
726
+ <path d="M0 0h24v24H0V0z" fill="none" />
727
+ <path
728
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
729
+ />
730
+ </svg>
731
+ </ic-button>
732
+ </div>
733
+ </div>
734
+ <div>
735
+ <ic-typography>Light - monochrome</ic-typography>
736
+ <div
737
+ style="width: fit-content; background-color: #ececec; padding: 0.5rem;"
738
+ >
739
+ <ic-button
740
+ variant="icon-primary"
741
+ aria-label="refresh"
742
+ id="testbutton"
743
+ theme="light"
744
+ monochrome
745
+ >
746
+ <svg
747
+ xmlns="http://www.w3.org/2000/svg"
748
+ height="24px"
749
+ viewBox="0 0 24 24"
750
+ width="24px"
751
+ fill="#000000"
752
+ >
753
+ <path d="M0 0h24v24H0V0z" fill="none" />
754
+ <path
755
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
756
+ />
757
+ </svg>
758
+ </ic-button>
759
+ <ic-button
760
+ variant="icon-secondary"
761
+ aria-label="refresh"
762
+ id="testbutton"
763
+ theme="light"
764
+ monochrome
765
+ >
766
+ <svg
767
+ xmlns="http://www.w3.org/2000/svg"
768
+ height="24px"
769
+ viewBox="0 0 24 24"
770
+ width="24px"
771
+ fill="#000000"
772
+ >
773
+ <path d="M0 0h24v24H0V0z" fill="none" />
774
+ <path
775
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
776
+ />
777
+ </svg>
778
+ </ic-button>
779
+ <ic-button
780
+ variant="icon-tertiary"
781
+ aria-label="refresh"
782
+ id="testbutton"
783
+ theme="light"
784
+ monochrome
785
+ >
786
+ <svg
787
+ xmlns="http://www.w3.org/2000/svg"
788
+ height="24px"
789
+ viewBox="0 0 24 24"
790
+ width="24px"
791
+ fill="#000000"
792
+ >
793
+ <path d="M0 0h24v24H0V0z" fill="none" />
794
+ <path
795
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
796
+ />
797
+ </svg>
798
+ </ic-button>
799
+ <ic-button
800
+ variant="icon-primary"
801
+ aria-label="refresh"
802
+ id="testbutton"
803
+ theme="light"
804
+ loading
805
+ monochrome
806
+ >
807
+ <svg
808
+ xmlns="http://www.w3.org/2000/svg"
809
+ height="24px"
810
+ viewBox="0 0 24 24"
811
+ width="24px"
812
+ fill="#000000"
813
+ >
814
+ <path d="M0 0h24v24H0V0z" fill="none" />
815
+ <path
816
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
817
+ />
818
+ </svg>
819
+ </ic-button>
820
+ <ic-button
821
+ variant="icon-secondary"
822
+ aria-label="refresh"
823
+ id="testbutton"
824
+ theme="light"
825
+ loading
826
+ monochrome
827
+ >
828
+ <svg
829
+ xmlns="http://www.w3.org/2000/svg"
830
+ height="24px"
831
+ viewBox="0 0 24 24"
832
+ width="24px"
833
+ fill="#000000"
834
+ >
835
+ <path d="M0 0h24v24H0V0z" fill="none" />
836
+ <path
837
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
838
+ />
839
+ </svg>
840
+ </ic-button>
841
+ <ic-button
842
+ variant="icon-tertiary"
843
+ aria-label="refresh"
844
+ id="testbutton"
845
+ theme="light"
846
+ loading
847
+ monochrome
848
+ >
849
+ <svg
850
+ xmlns="http://www.w3.org/2000/svg"
851
+ height="24px"
852
+ viewBox="0 0 24 24"
853
+ width="24px"
854
+ fill="#000000"
855
+ >
856
+ <path d="M0 0h24v24H0V0z" fill="none" />
857
+ <path
858
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
859
+ />
860
+ </svg>
861
+ </ic-button>
862
+ </div>
863
+ </div>
864
+ <ic-typography>Dark</ic-typography>
865
+ <div
866
+ style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
867
+ >
868
+ <div>
869
+ <ic-button
870
+ variant="icon-primary"
871
+ aria-label="refresh"
872
+ id="testbutton"
873
+ theme="dark"
874
+ >
875
+ <svg
876
+ xmlns="http://www.w3.org/2000/svg"
877
+ height="24px"
878
+ viewBox="0 0 24 24"
879
+ width="24px"
880
+ fill="#000000"
881
+ >
882
+ <path d="M0 0h24v24H0V0z" fill="none" />
883
+ <path
884
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
885
+ />
886
+ </svg>
887
+ </ic-button>
888
+ <ic-button
889
+ variant="icon-secondary"
890
+ aria-label="refresh"
891
+ id="testbutton"
892
+ theme="dark"
893
+ >
894
+ <svg
895
+ xmlns="http://www.w3.org/2000/svg"
896
+ height="24px"
897
+ viewBox="0 0 24 24"
898
+ width="24px"
899
+ fill="#000000"
900
+ >
901
+ <path d="M0 0h24v24H0V0z" fill="none" />
902
+ <path
903
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
904
+ />
905
+ </svg>
906
+ </ic-button>
907
+ <ic-button
908
+ variant="icon-tertiary"
909
+ aria-label="refresh"
910
+ id="testbutton"
911
+ theme="dark"
912
+ >
913
+ <svg
914
+ xmlns="http://www.w3.org/2000/svg"
915
+ height="24px"
916
+ viewBox="0 0 24 24"
917
+ width="24px"
918
+ fill="#000000"
919
+ >
920
+ <path d="M0 0h24v24H0V0z" fill="none" />
921
+ <path
922
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
923
+ />
924
+ </svg>
925
+ </ic-button>
926
+ <ic-button
927
+ variant="icon-destructive"
928
+ aria-label="refresh"
929
+ id="testbutton"
930
+ theme="dark"
931
+ >
932
+ <svg
933
+ xmlns="http://www.w3.org/2000/svg"
934
+ height="24px"
935
+ viewBox="0 0 24 24"
936
+ width="24px"
937
+ fill="#000000"
938
+ >
939
+ <path d="M0 0h24v24H0V0z" fill="none" />
940
+ <path
941
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
942
+ />
943
+ </svg>
944
+ </ic-button>
945
+ </div>
946
+ </div>
947
+ <ic-typography>Dark Loading</ic-typography>
948
+ <div
949
+ style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
950
+ >
951
+ <div>
952
+ <ic-button
953
+ variant="icon-primary"
954
+ aria-label="refresh"
955
+ id="testbutton"
956
+ theme="dark"
957
+ loading
958
+ >
959
+ <svg
960
+ xmlns="http://www.w3.org/2000/svg"
961
+ height="24px"
962
+ viewBox="0 0 24 24"
963
+ width="24px"
964
+ fill="#000000"
965
+ >
966
+ <path d="M0 0h24v24H0V0z" fill="none" />
967
+ <path
968
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
969
+ />
970
+ </svg>
971
+ </ic-button>
972
+ <ic-button
973
+ variant="icon-secondary"
974
+ aria-label="refresh"
975
+ id="testbutton"
976
+ theme="dark"
977
+ loading
978
+ >
979
+ <svg
980
+ xmlns="http://www.w3.org/2000/svg"
981
+ height="24px"
982
+ viewBox="0 0 24 24"
983
+ width="24px"
984
+ fill="#000000"
985
+ >
986
+ <path d="M0 0h24v24H0V0z" fill="none" />
987
+ <path
988
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
989
+ />
990
+ </svg>
991
+ </ic-button>
992
+ <ic-button
993
+ variant="icon-tertiary"
994
+ aria-label="refresh"
995
+ id="testbutton"
996
+ theme="dark"
997
+ loading
998
+ >
999
+ <svg
1000
+ xmlns="http://www.w3.org/2000/svg"
1001
+ height="24px"
1002
+ viewBox="0 0 24 24"
1003
+ width="24px"
1004
+ fill="#000000"
1005
+ >
1006
+ <path d="M0 0h24v24H0V0z" fill="none" />
1007
+ <path
1008
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1009
+ />
1010
+ </svg>
1011
+ </ic-button>
1012
+ <ic-button
1013
+ variant="icon-destructive"
1014
+ aria-label="refresh"
1015
+ id="testbutton"
1016
+ theme="dark"
1017
+ loading
1018
+ >
1019
+ <svg
1020
+ xmlns="http://www.w3.org/2000/svg"
1021
+ height="24px"
1022
+ viewBox="0 0 24 24"
1023
+ width="24px"
1024
+ fill="#000000"
1025
+ >
1026
+ <path d="M0 0h24v24H0V0z" fill="none" />
1027
+ <path
1028
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1029
+ />
1030
+ </svg>
1031
+ </ic-button>
1032
+ </div>
1033
+ </div>
1034
+ <ic-typography>Dark - monochrome</ic-typography>
1035
+ <div
1036
+ style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
1037
+ >
1038
+ <div>
1039
+ <ic-button
1040
+ variant="icon-primary"
1041
+ aria-label="refresh"
1042
+ id="testbutton"
1043
+ theme="dark"
1044
+ monochrome
1045
+ >
1046
+ <svg
1047
+ xmlns="http://www.w3.org/2000/svg"
1048
+ height="24px"
1049
+ viewBox="0 0 24 24"
1050
+ width="24px"
1051
+ fill="#000000"
1052
+ >
1053
+ <path d="M0 0h24v24H0V0z" fill="none" />
1054
+ <path
1055
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1056
+ />
1057
+ </svg>
1058
+ </ic-button>
1059
+ <ic-button
1060
+ variant="icon-secondary"
1061
+ aria-label="refresh"
1062
+ id="testbutton"
1063
+ theme="dark"
1064
+ monochrome
1065
+ >
1066
+ <svg
1067
+ xmlns="http://www.w3.org/2000/svg"
1068
+ height="24px"
1069
+ viewBox="0 0 24 24"
1070
+ width="24px"
1071
+ fill="#000000"
1072
+ >
1073
+ <path d="M0 0h24v24H0V0z" fill="none" />
1074
+ <path
1075
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1076
+ />
1077
+ </svg>
1078
+ </ic-button>
1079
+ <ic-button
1080
+ variant="icon-tertiary"
1081
+ aria-label="refresh"
1082
+ id="testbutton"
1083
+ theme="dark"
1084
+ monochrome
1085
+ >
1086
+ <svg
1087
+ xmlns="http://www.w3.org/2000/svg"
1088
+ height="24px"
1089
+ viewBox="0 0 24 24"
1090
+ width="24px"
1091
+ fill="#000000"
1092
+ >
1093
+ <path d="M0 0h24v24H0V0z" fill="none" />
1094
+ <path
1095
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1096
+ />
1097
+ </svg>
1098
+ </ic-button>
1099
+ <ic-button
1100
+ variant="icon-primary"
1101
+ aria-label="refresh"
1102
+ id="testbutton"
1103
+ theme="dark"
1104
+ loading
1105
+ monochrome
1106
+ >
1107
+ <svg
1108
+ xmlns="http://www.w3.org/2000/svg"
1109
+ height="24px"
1110
+ viewBox="0 0 24 24"
1111
+ width="24px"
1112
+ fill="#000000"
1113
+ >
1114
+ <path d="M0 0h24v24H0V0z" fill="none" />
1115
+ <path
1116
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1117
+ />
1118
+ </svg>
1119
+ </ic-button>
1120
+ <ic-button
1121
+ variant="icon-secondary"
1122
+ aria-label="refresh"
1123
+ id="testbutton"
1124
+ theme="dark"
1125
+ loading
1126
+ monochrome
1127
+ >
1128
+ <svg
1129
+ xmlns="http://www.w3.org/2000/svg"
1130
+ height="24px"
1131
+ viewBox="0 0 24 24"
1132
+ width="24px"
1133
+ fill="#000000"
1134
+ >
1135
+ <path d="M0 0h24v24H0V0z" fill="none" />
1136
+ <path
1137
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1138
+ />
1139
+ </svg>
1140
+ </ic-button>
1141
+ <ic-button
1142
+ variant="icon-tertiary"
1143
+ aria-label="refresh"
1144
+ id="testbutton"
1145
+ theme="dark"
1146
+ loading
1147
+ monochrome
1148
+ >
1149
+ <svg
1150
+ xmlns="http://www.w3.org/2000/svg"
1151
+ height="24px"
1152
+ viewBox="0 0 24 24"
1153
+ width="24px"
1154
+ fill="#000000"
1155
+ >
1156
+ <path d="M0 0h24v24H0V0z" fill="none" />
1157
+ <path
1158
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1159
+ />
1160
+ </svg>
1161
+ </ic-button>
1162
+ </div>
1163
+ </div>
1164
+ </div>`,
1165
+
1166
+ name: "Icon variants",
1167
+ };
1168
+
1169
+ export const WithIcon = {
1170
+ render: () =>
1171
+ html`<div style="padding: 1rem; display: flex; gap: 1rem">
1172
+ <ic-button variant="primary">
1173
+ Primary
1174
+ <svg
1175
+ slot="left-icon"
1176
+ xmlns="http://www.w3.org/2000/svg"
1177
+ height="24px"
1178
+ viewBox="0 0 24 24"
1179
+ width="24px"
1180
+ fill="#000000"
1181
+ >
1182
+ <path d="M0 0h24v24H0V0z" fill="none" />
1183
+ <path
1184
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1185
+ />
1186
+ </svg>
1187
+ </ic-button>
1188
+ <ic-button variant="secondary">
1189
+ Secondary
1190
+ <svg
1191
+ slot="left-icon"
1192
+ xmlns="http://www.w3.org/2000/svg"
1193
+ height="24px"
1194
+ viewBox="0 0 24 24"
1195
+ width="24px"
1196
+ fill="#000000"
1197
+ >
1198
+ <path d="M0 0h24v24H0V0z" fill="none" />
1199
+ <path
1200
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1201
+ />
1202
+ </svg>
1203
+ </ic-button>
1204
+ <ic-button variant="tertiary">
1205
+ Tertiary
1206
+ <svg
1207
+ slot="left-icon"
1208
+ xmlns="http://www.w3.org/2000/svg"
1209
+ height="24px"
1210
+ viewBox="0 0 24 24"
1211
+ width="24px"
1212
+ fill="#000000"
1213
+ >
1214
+ <path d="M0 0h24v24H0V0z" fill="none" />
1215
+ <path
1216
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1217
+ />
1218
+ </svg>
1219
+ </ic-button>
1220
+ <ic-button variant="destructive">
1221
+ Destructive
1222
+ <svg
1223
+ slot="left-icon"
1224
+ xmlns="http://www.w3.org/2000/svg"
1225
+ height="24px"
1226
+ viewBox="0 0 24 24"
1227
+ width="24px"
1228
+ fill="#000000"
1229
+ >
1230
+ <path d="M0 0h24v24H0V0z" fill="none" />
1231
+ <path
1232
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1233
+ />
1234
+ </svg>
1235
+ </ic-button>
1236
+ </div>
1237
+ <div style="padding: 1rem; display: flex; gap: 1rem">
1238
+ <ic-button variant="primary">
1239
+ Primary
1240
+ <svg
1241
+ slot="right-icon"
1242
+ xmlns="http://www.w3.org/2000/svg"
1243
+ height="24px"
1244
+ viewBox="0 0 24 24"
1245
+ width="24px"
1246
+ fill="#000000"
1247
+ >
1248
+ <path d="M0 0h24v24H0V0z" fill="none" />
1249
+ <path
1250
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1251
+ />
1252
+ </svg>
1253
+ </ic-button>
1254
+ <ic-button variant="secondary">
1255
+ Secondary
1256
+ <svg
1257
+ slot="right-icon"
1258
+ xmlns="http://www.w3.org/2000/svg"
1259
+ height="24px"
1260
+ viewBox="0 0 24 24"
1261
+ width="24px"
1262
+ fill="#000000"
1263
+ >
1264
+ <path d="M0 0h24v24H0V0z" fill="none" />
1265
+ <path
1266
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1267
+ />
1268
+ </svg>
1269
+ </ic-button>
1270
+ <ic-button variant="tertiary">
1271
+ Tertiary
1272
+ <svg
1273
+ slot="right-icon"
1274
+ xmlns="http://www.w3.org/2000/svg"
1275
+ height="24px"
1276
+ viewBox="0 0 24 24"
1277
+ width="24px"
1278
+ fill="#000000"
1279
+ >
1280
+ <path d="M0 0h24v24H0V0z" fill="none" />
1281
+ <path
1282
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1283
+ />
1284
+ </svg>
1285
+ </ic-button>
1286
+ <ic-button variant="destructive">
1287
+ Destructive
1288
+ <svg
1289
+ slot="right-icon"
1290
+ xmlns="http://www.w3.org/2000/svg"
1291
+ height="24px"
1292
+ viewBox="0 0 24 24"
1293
+ width="24px"
1294
+ fill="#000000"
1295
+ >
1296
+ <path d="M0 0h24v24H0V0z" fill="none" />
1297
+ <path
1298
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1299
+ />
1300
+ </svg>
1301
+ </ic-button>
1302
+ </div> `,
1303
+
1304
+ name: "With icon",
1305
+ };
1306
+
1307
+ export const Dropdown = {
1308
+ render: () =>
1309
+ html`<div>
1310
+ <div style="padding: 6px">
1311
+ <ic-button dropdown="true" variant="primary">Button</ic-button>
1312
+ <ic-button dropdown="true" variant="primary"
1313
+ >Button
1314
+ <svg
1315
+ slot="left-icon"
1316
+ xmlns="http://www.w3.org/2000/svg"
1317
+ height="24px"
1318
+ viewBox="0 0 24 24"
1319
+ width="24px"
1320
+ fill="#000000"
1321
+ >
1322
+ <path d="M0 0h24v24H0V0z" fill="none" />
1323
+ <path
1324
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1325
+ />
1326
+ </svg>
1327
+ </ic-button>
1328
+ <ic-button dropdown="true" variant="secondary">Button</ic-button>
1329
+ <ic-button dropdown="true" variant="tertiary">Button</ic-button>
1330
+ </div>
1331
+ <div style="padding: 6px">
1332
+ <ic-button dropdown="true" disabled="true" variant="primary"
1333
+ >Button</ic-button
1334
+ >
1335
+ <ic-button dropdown="true" disabled="true" variant="primary"
1336
+ >Button
1337
+ <svg
1338
+ slot="left-icon"
1339
+ xmlns="http://www.w3.org/2000/svg"
1340
+ height="24px"
1341
+ viewBox="0 0 24 24"
1342
+ width="24px"
1343
+ fill="#000000"
1344
+ >
1345
+ <path d="M0 0h24v24H0V0z" fill="none" />
1346
+ <path
1347
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1348
+ />
1349
+ </svg>
1350
+ </ic-button>
1351
+ <ic-button dropdown="true" disabled="true" variant="secondary"
1352
+ >Button</ic-button
1353
+ >
1354
+ <ic-button dropdown="true" disabled="true" variant="tertiary"
1355
+ >Button</ic-button
1356
+ >
1357
+ </div>
1358
+ <div style="padding: 6px">
1359
+ <ic-button dropdown="true" variant="primary" theme="dark"
1360
+ >Button</ic-button
1361
+ >
1362
+ <ic-button dropdown="true" theme="dark" variant="primary"
1363
+ >Button
1364
+ <svg
1365
+ slot="left-icon"
1366
+ xmlns="http://www.w3.org/2000/svg"
1367
+ height="24px"
1368
+ viewBox="0 0 24 24"
1369
+ width="24px"
1370
+ fill="#000000"
1371
+ >
1372
+ <path d="M0 0h24v24H0V0z" fill="none" />
1373
+ <path
1374
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1375
+ />
1376
+ </svg>
1377
+ </ic-button>
1378
+ <ic-button dropdown="true" variant="secondary" theme="dark"
1379
+ >Button</ic-button
1380
+ >
1381
+ <ic-button dropdown="true" variant="tertiary" theme="dark"
1382
+ >Button</ic-button
1383
+ >
1384
+ </div>
1385
+ <div
1386
+ style="background-color:#17191C; padding:6px 10px; width:fit-content;"
1387
+ >
1388
+ <ic-button dropdown="true" variant="primary" theme="light"
1389
+ >Button</ic-button
1390
+ >
1391
+ <ic-button dropdown="true" theme="light" variant="primary"
1392
+ >Button
1393
+ <svg
1394
+ slot="left-icon"
1395
+ xmlns="http://www.w3.org/2000/svg"
1396
+ height="24px"
1397
+ viewBox="0 0 24 24"
1398
+ width="24px"
1399
+ fill="#000000"
1400
+ >
1401
+ <path d="M0 0h24v24H0V0z" fill="none" />
1402
+ <path
1403
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1404
+ />
1405
+ </svg>
1406
+ </ic-button>
1407
+ <ic-button dropdown="true" variant="secondary" theme="light"
1408
+ >Button</ic-button
1409
+ >
1410
+ <ic-button
1411
+ dropdown="true"
1412
+ variant="tertiary"
1413
+ theme="light"
1414
+ id="mybuttonid"
1415
+ >Button</ic-button
1416
+ >
1417
+ </div>
1418
+ <div style="padding: 6px">
1419
+ <ic-button dropdown="true" variant="primary" size="small"
1420
+ >Button</ic-button
1421
+ >
1422
+ <ic-button dropdown="true" size="small" variant="primary"
1423
+ >Button
1424
+ <svg
1425
+ slot="left-icon"
1426
+ xmlns="http://www.w3.org/2000/svg"
1427
+ height="24px"
1428
+ viewBox="0 0 24 24"
1429
+ width="24px"
1430
+ fill="#000000"
1431
+ >
1432
+ <path d="M0 0h24v24H0V0z" fill="none" />
1433
+ <path
1434
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1435
+ />
1436
+ </svg>
1437
+ </ic-button>
1438
+ <ic-button dropdown="true" variant="secondary" size="small"
1439
+ >Button</ic-button
1440
+ >
1441
+ <ic-button dropdown="true" variant="tertiary" size="small"
1442
+ >Button</ic-button
1443
+ >
1444
+ </div>
1445
+ <div style="padding: 6px">
1446
+ <ic-button dropdown="true" variant="primary" size="large"
1447
+ >Button</ic-button
1448
+ >
1449
+ <ic-button dropdown="true" size="large" variant="primary"
1450
+ >Button
1451
+ <svg
1452
+ slot="left-icon"
1453
+ xmlns="http://www.w3.org/2000/svg"
1454
+ height="24px"
1455
+ viewBox="0 0 24 24"
1456
+ width="24px"
1457
+ fill="#000000"
1458
+ >
1459
+ <path d="M0 0h24v24H0V0z" fill="none" />
1460
+ <path
1461
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1462
+ />
1463
+ </svg>
1464
+ </ic-button>
1465
+ <ic-button dropdown="true" variant="secondary" size="large"
1466
+ >Button</ic-button
1467
+ >
1468
+ <ic-button dropdown="true" variant="tertiary" size="large"
1469
+ >Button</ic-button
1470
+ >
1471
+ </div>
1472
+ </div>`,
1473
+
1474
+ name: "Dropdown",
1475
+ };
1476
+
1477
+ export const DropdownExample = {
1478
+ render: () =>
1479
+ html`<script>
1480
+ var icPopover = document.querySelector("#popover-menu");
1481
+ var icButton = document.querySelector("#button-1");
1482
+ function handleClick() {
1483
+ icPopover.open = icButton.dropdownExpanded;
1484
+ }
1485
+ icPopover.addEventListener("icPopoverClosed", handleClose);
1486
+ function handleClose() {
1487
+ icButton.dropdownExpanded = icPopover.open;
1488
+ }
1489
+ </script>
1490
+ <div>
1491
+ <ic-button
1492
+ dropdown="true"
1493
+ variant="primary"
1494
+ onclick="handleClick()"
1495
+ id="button-1"
1496
+ >Button</ic-button
1497
+ >
1498
+ <ic-popover-menu
1499
+ anchor="button-1"
1500
+ aria-label="popover"
1501
+ id="popover-menu"
1502
+ >
1503
+ <ic-menu-item label="Copy code"></ic-menu-item>
1504
+ <ic-menu-item label="Paste code"></ic-menu-item>
1505
+ <ic-menu-item label="Actions"></ic-menu-item>
1506
+ </ic-popover-menu>
1507
+ </div>`,
1508
+
1509
+ name: "Dropdown example",
1510
+ };
1511
+
1512
+ export const Size = {
1513
+ render: () =>
1514
+ html` <ic-button variant="primary" size="small">Small</ic-button>
1515
+ <ic-button variant="primary">Default</ic-button>
1516
+ <ic-button variant="primary" size="large">Large</ic-button>
1517
+ <ic-button variant="primary" size="small"
1518
+ >Small
1519
+ <svg
1520
+ slot="left-icon"
1521
+ xmlns="http://www.w3.org/2000/svg"
1522
+ height="24px"
1523
+ viewBox="0 0 24 24"
1524
+ width="24px"
1525
+ fill="#000000"
1526
+ >
1527
+ <path d="M0 0h24v24H0V0z" fill="none" />
1528
+ <path
1529
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1530
+ />
1531
+ </svg>
1532
+ </ic-button>
1533
+ <ic-button variant="primary"
1534
+ >Default
1535
+ <svg
1536
+ slot="left-icon"
1537
+ xmlns="http://www.w3.org/2000/svg"
1538
+ height="24px"
1539
+ viewBox="0 0 24 24"
1540
+ width="24px"
1541
+ fill="#000000"
1542
+ >
1543
+ <path d="M0 0h24v24H0V0z" fill="none" />
1544
+ <path
1545
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1546
+ />
1547
+ </svg>
1548
+ </ic-button>
1549
+ <ic-button variant="primary" size="large"
1550
+ >Large
1551
+ <svg
1552
+ slot="left-icon"
1553
+ xmlns="http://www.w3.org/2000/svg"
1554
+ height="24px"
1555
+ viewBox="0 0 24 24"
1556
+ width="24px"
1557
+ fill="#000000"
1558
+ >
1559
+ <path d="M0 0h24v24H0V0z" fill="none" />
1560
+ <path
1561
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1562
+ />
1563
+ </svg>
1564
+ </ic-button>`,
1565
+
1566
+ name: "Size",
1567
+ };
1568
+
1569
+ export const RouterLink = {
1570
+ render: () =>
1571
+ html`<div style="padding: 8px">
1572
+ <ic-button size="small">
1573
+ <a slot="router-item" href="/">Slotted link</a>
1574
+ </ic-button>
1575
+ <ic-button>
1576
+ <a slot="router-item" href="/">Slotted link</a>
1577
+ </ic-button>
1578
+ <ic-button size="large">
1579
+ <a slot="router-item" href="/">Slotted link</a>
1580
+ </ic-button>
1581
+ </div>
1582
+ <div style="padding: 8px">
1583
+ <ic-button disabled="true">
1584
+ <a slot="router-item" href="/">Slotted link</a>
1585
+ </ic-button>
1586
+ <ic-button variant="secondary">
1587
+ <a slot="router-item" href="/">Slotted link</a>
1588
+ </ic-button>
1589
+ <ic-button variant="tertiary">
1590
+ <a slot="router-item" href="/">Slotted link</a>
1591
+ </ic-button>
1592
+ <ic-button variant="destructive">
1593
+ <a slot="router-item" href="/">Slotted link</a>
1594
+ </ic-button>
1595
+ <ic-button variant="icon">
1596
+ <a slot="router-item" href="/">
1597
+ <svg
1598
+ width="24"
1599
+ height="24"
1600
+ viewBox="0 0 24 24"
1601
+ fill="none"
1602
+ xmlns="http://www.w3.org/2000/svg"
1603
+ >
1604
+ <path
1605
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1606
+ fill="currentColor"
1607
+ />
1608
+ </svg>
1609
+ </a>
1610
+ </ic-button>
1611
+ </div>
1612
+ <div style="padding: 8px">
1613
+ <ic-button theme="light" monochrome="true">
1614
+ <a slot="router-item" href="/">Slotted link</a>
1615
+ </ic-button>
1616
+ <ic-button theme="dark" monochrome="true">
1617
+ <a slot="router-item" href="/">Slotted link</a>
1618
+ </ic-button>
1619
+ </div>`,
1620
+
1621
+ name: "Router link",
1622
+
1623
+ parameters: {
1624
+ layout: "fullscreen",
1625
+ },
1626
+ };
1627
+
1628
+ export const RouterLinkWithSlottedContent = {
1629
+ render: () =>
1630
+ html`<div style="padding: 8px">
1631
+ <ic-button size="small">
1632
+ <a slot="router-item" href="/">
1633
+ <svg
1634
+ slot="left-icon"
1635
+ width="24"
1636
+ height="24"
1637
+ viewBox="0 0 24 24"
1638
+ fill="none"
1639
+ xmlns="http://www.w3.org/2000/svg"
1640
+ >
1641
+ <path
1642
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1643
+ fill="currentColor"
1644
+ />
1645
+ </svg>
1646
+ Slotted link
1647
+ </a>
1648
+ </ic-button>
1649
+ <ic-button>
1650
+ <a slot="router-item" href="/">
1651
+ <svg
1652
+ slot="left-icon"
1653
+ width="24"
1654
+ height="24"
1655
+ viewBox="0 0 24 24"
1656
+ fill="none"
1657
+ xmlns="http://www.w3.org/2000/svg"
1658
+ >
1659
+ <path
1660
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1661
+ fill="currentColor"
1662
+ />
1663
+ </svg>
1664
+ Slotted link
1665
+ </a>
1666
+ </ic-button>
1667
+ <ic-button size="large">
1668
+ <a slot="router-item" href="/">
1669
+ <svg
1670
+ slot="left-icon"
1671
+ width="24"
1672
+ height="24"
1673
+ viewBox="0 0 24 24"
1674
+ fill="none"
1675
+ xmlns="http://www.w3.org/2000/svg"
1676
+ >
1677
+ <path
1678
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1679
+ fill="currentColor"
1680
+ />
1681
+ </svg>
1682
+ <ic-badge slot="badge" label="1" position="near"></ic-badge>
1683
+ Slotted link
1684
+ </a>
1685
+ </ic-button>
1686
+ </div>
1687
+ <div style="padding: 8px">
1688
+ <ic-button disabled="true">
1689
+ <a slot="router-item" href="/">
1690
+ <svg
1691
+ slot="right-icon"
1692
+ width="24"
1693
+ height="24"
1694
+ viewBox="0 0 24 24"
1695
+ fill="none"
1696
+ xmlns="http://www.w3.org/2000/svg"
1697
+ >
1698
+ <path
1699
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1700
+ fill="currentColor"
1701
+ />
1702
+ </svg>
1703
+ Slotted link
1704
+ </a>
1705
+ </ic-button>
1706
+ <ic-button variant="secondary">
1707
+ <a slot="router-item" href="/">
1708
+ <svg
1709
+ slot="right-icon"
1710
+ width="24"
1711
+ height="24"
1712
+ viewBox="0 0 24 24"
1713
+ fill="none"
1714
+ xmlns="http://www.w3.org/2000/svg"
1715
+ >
1716
+ <path
1717
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1718
+ fill="currentColor"
1719
+ />
1720
+ </svg>
1721
+ Slotted link
1722
+ </a>
1723
+ </ic-button>
1724
+ <ic-button variant="tertiary">
1725
+ <a slot="router-item" href="/">
1726
+ <svg
1727
+ slot="right-icon"
1728
+ width="24"
1729
+ height="24"
1730
+ viewBox="0 0 24 24"
1731
+ fill="none"
1732
+ xmlns="http://www.w3.org/2000/svg"
1733
+ >
1734
+ <path
1735
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1736
+ fill="currentColor"
1737
+ />
1738
+ </svg>
1739
+ Slotted link
1740
+ </a>
1741
+ </ic-button>
1742
+ <ic-button variant="destructive">
1743
+ <a slot="router-item" href="/">
1744
+ <svg
1745
+ slot="right-icon"
1746
+ width="24"
1747
+ height="24"
1748
+ viewBox="0 0 24 24"
1749
+ fill="none"
1750
+ xmlns="http://www.w3.org/2000/svg"
1751
+ >
1752
+ <path
1753
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1754
+ fill="currentColor"
1755
+ />
1756
+ </svg>
1757
+ Slotted link
1758
+ </a>
1759
+ </ic-button>
1760
+ </div>
1761
+ <div style="padding: 8px">
1762
+ <ic-button theme="light" monochrome="true">
1763
+ <a slot="router-item" href="/">
1764
+ <svg
1765
+ slot="top-icon"
1766
+ width="24"
1767
+ height="24"
1768
+ viewBox="0 0 24 24"
1769
+ fill="none"
1770
+ xmlns="http://www.w3.org/2000/svg"
1771
+ >
1772
+ <path
1773
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1774
+ fill="currentColor"
1775
+ />
1776
+ </svg>
1777
+ Slotted link
1778
+ </a>
1779
+ </ic-button>
1780
+ <ic-button theme="dark" monochrome="true">
1781
+ <a slot="router-item" href="/">
1782
+ <svg
1783
+ slot="top-icon"
1784
+ width="24"
1785
+ height="24"
1786
+ viewBox="0 0 24 24"
1787
+ fill="none"
1788
+ xmlns="http://www.w3.org/2000/svg"
1789
+ >
1790
+ <path
1791
+ d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
1792
+ fill="currentColor"
1793
+ />
1794
+ </svg>
1795
+ Slotted link
1796
+ </a>
1797
+ </ic-button>
1798
+ </div>`,
1799
+
1800
+ name: "Router link - with slotted content",
1801
+
1802
+ parameters: {
1803
+ layout: "fullscreen",
1804
+ },
1805
+ };
1806
+
1807
+ export const IconWithoutViewBox = {
1808
+ render: () =>
1809
+ html`<ic-button variant="primary" size="small"
1810
+ >Small
1811
+ <svg
1812
+ slot="left-icon"
1813
+ xmlns="http://www.w3.org/2000/svg"
1814
+ height="24px"
1815
+ width="24px"
1816
+ fill="#000000"
1817
+ >
1818
+ <path d="M0 0h24v24H0V0z" fill="none" />
1819
+ <path
1820
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1821
+ />
1822
+ </svg>
1823
+ </ic-button>
1824
+ <ic-button variant="primary"
1825
+ >Default
1826
+ <svg
1827
+ slot="left-icon"
1828
+ xmlns="http://www.w3.org/2000/svg"
1829
+ height="24px"
1830
+ width="24px"
1831
+ fill="#000000"
1832
+ >
1833
+ <path d="M0 0h24v24H0V0z" fill="none" />
1834
+ <path
1835
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1836
+ />
1837
+ </svg>
1838
+ </ic-button>
1839
+ <ic-button variant="primary" size="large"
1840
+ >Large
1841
+ <svg
1842
+ slot="left-icon"
1843
+ xmlns="http://www.w3.org/2000/svg"
1844
+ height="24px"
1845
+ width="24px"
1846
+ fill="#000000"
1847
+ >
1848
+ <path d="M0 0h24v24H0V0z" fill="none" />
1849
+ <path
1850
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1851
+ />
1852
+ </svg>
1853
+ </ic-button>`,
1854
+
1855
+ name: "Icon without viewBox",
1856
+ };
1857
+
1858
+ export const FullWidth = {
1859
+ render: () => html`
1860
+ <ic-button variant="primary" full-width="true"
1861
+ >Button
1862
+ <svg
1863
+ slot="left-icon"
1864
+ xmlns="http://www.w3.org/2000/svg"
1865
+ height="24px"
1866
+ viewBox="0 0 24 24"
1867
+ width="24px"
1868
+ fill="#000000"
1869
+ >
1870
+ <path d="M0 0h24v24H0V0z" fill="none" />
1871
+ <path
1872
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1873
+ />
1874
+ </svg>
1875
+ </ic-button>
1876
+ <ic-button variant="secondary" full-width="true"
1877
+ >Button
1878
+ <svg
1879
+ slot="left-icon"
1880
+ xmlns="http://www.w3.org/2000/svg"
1881
+ height="24px"
1882
+ viewBox="0 0 24 24"
1883
+ width="24px"
1884
+ fill="#000000"
1885
+ >
1886
+ <path d="M0 0h24v24H0V0z" fill="none" />
1887
+ <path
1888
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1889
+ />
1890
+ </svg>
1891
+ </ic-button>
1892
+ <ic-button variant="tertiary" full-width="true"
1893
+ >Button
1894
+ <svg
1895
+ slot="left-icon"
1896
+ xmlns="http://www.w3.org/2000/svg"
1897
+ height="24px"
1898
+ viewBox="0 0 24 24"
1899
+ width="24px"
1900
+ fill="#000000"
1901
+ >
1902
+ <path d="M0 0h24v24H0V0z" fill="none" />
1903
+ <path
1904
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1905
+ />
1906
+ </svg>
1907
+ </ic-button>
1908
+ <ic-button theme="dark" full-width="true"
1909
+ >Button
1910
+ <svg
1911
+ slot="left-icon"
1912
+ xmlns="http://www.w3.org/2000/svg"
1913
+ height="24px"
1914
+ viewBox="0 0 24 24"
1915
+ width="24px"
1916
+ fill="#000000"
1917
+ >
1918
+ <path d="M0 0h24v24H0V0z" fill="none" />
1919
+ <path
1920
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1921
+ />
1922
+ </svg>
1923
+ </ic-button>
1924
+ <ic-button variant="destructive" full-width="true"
1925
+ >Button
1926
+ <svg
1927
+ slot="left-icon"
1928
+ xmlns="http://www.w3.org/2000/svg"
1929
+ height="24px"
1930
+ viewBox="0 0 24 24"
1931
+ width="24px"
1932
+ fill="#000000"
1933
+ >
1934
+ <path d="M0 0h24v24H0V0z" fill="none" />
1935
+ <path
1936
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1937
+ />
1938
+ </svg>
1939
+ </ic-button>
1940
+ <ic-button variant="destructive" disabled full-width="true"
1941
+ >Button
1942
+ <svg
1943
+ slot="left-icon"
1944
+ xmlns="http://www.w3.org/2000/svg"
1945
+ height="24px"
1946
+ viewBox="0 0 24 24"
1947
+ width="24px"
1948
+ fill="#000000"
1949
+ >
1950
+ <path d="M0 0h24v24H0V0z" fill="none" />
1951
+ <path
1952
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1953
+ />
1954
+ </svg>
1955
+ </ic-button>
1956
+ <div style="background-color:#17191C; padding:6px 10px,">
1957
+ <ic-button variant="primary" theme="light" full-width="true">
1958
+ Button
1959
+ <svg
1960
+ slot="left-icon"
1961
+ xmlns="http://www.w3.org/2000/svg"
1962
+ height="24px"
1963
+ viewBox="0 0 24 24"
1964
+ width="24px"
1965
+ fill="#000000"
1966
+ >
1967
+ <path d="M0 0h24v24H0V0z" fill="none" />
1968
+ <path
1969
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1970
+ />
1971
+ </svg>
1972
+ </ic-button>
1973
+ <ic-button variant="secondary" theme="light" full-width="true">
1974
+ Button
1975
+ <svg
1976
+ slot="left-icon"
1977
+ xmlns="http://www.w3.org/2000/svg"
1978
+ height="24px"
1979
+ viewBox="0 0 24 24"
1980
+ width="24px"
1981
+ fill="#000000"
1982
+ >
1983
+ <path d="M0 0h24v24H0V0z" fill="none" />
1984
+ <path
1985
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
1986
+ />
1987
+ </svg>
1988
+ </ic-button>
1989
+ <ic-button variant="tertiary" theme="light" full-width="true">
1990
+ Button
1991
+ <svg
1992
+ slot="left-icon"
1993
+ xmlns="http://www.w3.org/2000/svg"
1994
+ height="24px"
1995
+ viewBox="0 0 24 24"
1996
+ width="24px"
1997
+ fill="#000000"
1998
+ >
1999
+ <path d="M0 0h24v24H0V0z" fill="none" />
2000
+ <path
2001
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
2002
+ />
2003
+ </svg>
2004
+ </ic-button>
2005
+ </div>
2006
+ `,
2007
+
2008
+ name: "Full width",
2009
+ };
2010
+
2011
+ export const MinWidth = {
2012
+ render: () => html`
2013
+ <style>
2014
+ ic-button {
2015
+ --min-width: 4rem;
2016
+ }
2017
+ </style>
2018
+ <ic-button>Min</ic-button>
2019
+ <ic-button variant="secondary">Min</ic-button>
2020
+ `,
2021
+
2022
+ name: "Min width",
2023
+ };
2024
+
2025
+ export const Height = {
2026
+ render: () => html`
2027
+ <style>
2028
+ ic-button[name="tall-button"] {
2029
+ --height: 9rem;
2030
+ }
2031
+ </style>
2032
+ <ic-button name="tall-button">Tall Button</ic-button>
2033
+ <ic-button variant="secondary" name="tall-button">Tall Button</ic-button>
2034
+ `,
2035
+
2036
+ name: "Height",
2037
+ };
2038
+
2039
+ export const Tooltips = {
2040
+ render: () =>
2041
+ html`<ic-button
2042
+ variant="icon"
2043
+ aria-label="refresh"
2044
+ title="aria label sets the icon button's accessible name, title adds a tooltip"
2045
+ id="testbutton"
2046
+ ><svg
2047
+ xmlns="http://www.w3.org/2000/svg"
2048
+ height="24px"
2049
+ viewBox="0 0 24 24"
2050
+ width="24px"
2051
+ fill="#000000"
2052
+ >
2053
+ <path d="M0 0h24v24H0V0z" fill="none" />
2054
+ <path
2055
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
2056
+ /></svg
2057
+ ></ic-button>
2058
+ <ic-button
2059
+ variant="icon"
2060
+ aria-label="you can disable tooltips on icon buttons"
2061
+ disable-tooltip="true"
2062
+ id="testbutton"
2063
+ ><svg
2064
+ xmlns="http://www.w3.org/2000/svg"
2065
+ height="24px"
2066
+ viewBox="0 0 24 24"
2067
+ width="24px"
2068
+ fill="#000000"
2069
+ >
2070
+ <path d="M0 0h24v24H0V0z" fill="none" />
2071
+ <path
2072
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
2073
+ /></svg
2074
+ ></ic-button>
2075
+ <ic-button
2076
+ variant="primary"
2077
+ id="testbutton2"
2078
+ title="We can add tooltips to text buttons"
2079
+ >Button With Title</ic-button
2080
+ >
2081
+ <ic-button
2082
+ variant="primary"
2083
+ id="testbutton2"
2084
+ title="the tooltipPlacement prop allows us to change the location of the tooltip"
2085
+ tooltip-placement="right"
2086
+ >Different positions</ic-button
2087
+ >`,
2088
+
2089
+ name: "Tooltips",
2090
+ };
2091
+
2092
+ const inlineRadioSelector = "inline-radio";
2093
+
2094
+ export const Playground = {
2095
+ render: (args) =>
2096
+ html`<ic-button
2097
+ disabled=${args.disabled}
2098
+ variant=${args.variant}
2099
+ full-width=${args.fullWidth}
2100
+ size=${args.size}
2101
+ loading=${args.loading}
2102
+ theme=${args.theme}
2103
+ monochrome=${args.monochrome}
2104
+ dropdown=${args.dropdown}
2105
+ >${args.message}</ic-button
2106
+ >`,
2107
+
2108
+ args: defaultArgs,
2109
+
2110
+ argTypes: {
2111
+ variant: {
2112
+ options: ["primary", "secondary", "tertiary", "destructive"],
2113
+
2114
+ control: {
2115
+ type: "select",
2116
+ },
2117
+ },
2118
+
2119
+ size: {
2120
+ options: ["medium", "large", "small"],
2121
+
2122
+ control: {
2123
+ type: inlineRadioSelector,
2124
+ },
2125
+ },
2126
+
2127
+ theme: {
2128
+ options: ["inherit", "dark", "light"],
2129
+
2130
+ control: {
2131
+ type: inlineRadioSelector,
2132
+ },
2133
+ },
2134
+
2135
+ fullWidth: {
2136
+ control: {
2137
+ type: "boolean",
2138
+ },
2139
+ },
2140
+
2141
+ monochrome: {
2142
+ control: {
2143
+ type: "boolean",
2144
+ },
2145
+ },
2146
+
2147
+ dropdown: {
2148
+ control: {
2149
+ type: "boolean",
2150
+ },
2151
+ },
2152
+ },
2153
+
2154
+ name: "Playground",
2155
+ };
2156
+
2157
+ export const PlaygroundWithIcon = {
2158
+ render: (args) =>
2159
+ html`<ic-button
2160
+ disabled=${args.disabled}
2161
+ variant=${args.variant}
2162
+ size=${args.size}
2163
+ full-width=${args.fullWidth}
2164
+ loading=${args.loading}
2165
+ theme=${args.theme}
2166
+ monochrome=${args.monochrome}
2167
+ >${args.message}
2168
+ <svg
2169
+ slot=${args.iconPlacement}
2170
+ xmlns="http://www.w3.org/2000/svg"
2171
+ height="24px"
2172
+ viewBox="0 0 24 24"
2173
+ width="24px"
2174
+ fill="#000000"
2175
+ >
2176
+ <path d="M0 0h24v24H0V0z" fill="none" />
2177
+ <path
2178
+ d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
2179
+ /></svg
2180
+ ></ic-button>`,
2181
+
2182
+ args: {
2183
+ ...defaultArgs,
2184
+ },
2185
+
2186
+ argTypes: {
2187
+ variant: {
2188
+ options: ["primary", "secondary", "tertiary", "destructive"],
2189
+
2190
+ control: {
2191
+ type: "select",
2192
+ },
2193
+ },
2194
+
2195
+ size: {
2196
+ options: ["medium", "large", "small"],
2197
+
2198
+ control: {
2199
+ type: inlineRadioSelector,
2200
+ },
2201
+ },
2202
+
2203
+ theme: {
2204
+ options: ["default", "dark", "light"],
2205
+
2206
+ control: {
2207
+ type: inlineRadioSelector,
2208
+ },
2209
+ },
2210
+
2211
+ fullWidth: {
2212
+ control: {
2213
+ type: "boolean",
2214
+ },
2215
+ },
2216
+
2217
+ iconPlacement: {
2218
+ options: ["left-icon", "right-icon"],
2219
+
2220
+ control: {
2221
+ type: inlineRadioSelector,
2222
+ },
2223
+ },
2224
+
2225
+ monochrome: {
2226
+ control: {
2227
+ type: "boolean",
2228
+ },
2229
+ },
2230
+ },
2231
+
2232
+ name: "Playground with icon",
2233
+ };
2234
+
2235
+ export const Loading = {
2236
+ render: () => html`
2237
+ <div style="padding: 6px">
2238
+ <ic-button variant="primary" loading"
2239
+ >Button</ic-button
2240
+ >
2241
+ </div>
2242
+ <div style="padding: 6px">
2243
+ <ic-button
2244
+ variant="primary"
2245
+ loading
2246
+ theme="dark"
2247
+ >Button</ic-button
2248
+ >
2249
+ </div>
2250
+ <div
2251
+ style="background-color:#17191C; padding:6px 10px; width:fit-content"
2252
+ >
2253
+ <ic-button variant="primary" loading theme="light"
2254
+ >Button</ic-button
2255
+ >
2256
+ </div>
2257
+ <div style="padding: 6px">
2258
+ <ic-button variant="secondary" loading>Button</ic-button>
2259
+ </div>
2260
+ <div style="padding: 6px">
2261
+ <ic-button variant="secondary" loading theme="dark"
2262
+ >Button</ic-button
2263
+ >
2264
+ </div>
2265
+ <div
2266
+ style="background-color:#17191C; padding:6px 10px; width:fit-content"
2267
+ >
2268
+ <ic-button variant="secondary" loading theme="light"
2269
+ >Button</ic-button
2270
+ >
2271
+ </div>
2272
+ <div style="padding: 6px">
2273
+ <ic-button variant="tertiary" loading>Button</ic-button>
2274
+ </div>
2275
+ <div style="padding: 6px">
2276
+ <ic-button variant="tertiary" loading theme="dark"
2277
+ >Button</ic-button
2278
+ >
2279
+ </div>
2280
+ <div
2281
+ style="background-color:#17191C; padding:6px 10px; width:fit-content"
2282
+ >
2283
+ <ic-button variant="tertiary" loading theme="light"
2284
+ >Button</ic-button
2285
+ >
2286
+ </div>
2287
+ <ic-button variant="destructive" loading>Button</ic-button>
2288
+ `,
2289
+
2290
+ name: "Loading",
2291
+ };
2292
+
2293
+ export const AriaDescribedby = {
2294
+ render: () => html`
2295
+ <script>
2296
+ function btnClick() {
2297
+ var descEl = document.querySelector("#button-description");
2298
+ descEl.innerText = "See, I told you it was amazing!";
2299
+ }
2300
+ </script>
2301
+ <div style="padding: 6px">
2302
+ <span id="button-description">This button does something amazing</span>
2303
+ <br />
2304
+ <ic-button
2305
+ variant="primary"
2306
+ onclick="btnClick()"
2307
+ aria-describedby="button-description"
2308
+ >Button</ic-button
2309
+ >
2310
+ </div>
2311
+ `,
2312
+
2313
+ name: "Aria-describedby",
2314
+ };
2315
+
2316
+ export const FileUploadInAForm = {
2317
+ render: (args) => html`
2318
+ <form method="POST" action="someurl" enctype="multipart/form-data">
2319
+ <span id="selected-file">No File Selected</span>
2320
+ <div style="padding: 6px">
2321
+ <ic-button
2322
+ variant="primary"
2323
+ id="file-button"
2324
+ multiple="true"
2325
+ file-upload="true"
2326
+ accept=".doc, text/plain, .json"
2327
+ >Upload File true</ic-button
2328
+ >
2329
+ </div>
2330
+ <br />
2331
+ <br />
2332
+ <input type="submit" value="Submit" />
2333
+ <input type="reset" value="Reset" />
2334
+ </form>
2335
+ <script>
2336
+ var descEl = document.querySelector("#selected-file");
2337
+ var file;
2338
+ onclick = document
2339
+ .querySelector("#file-button")
2340
+ .addEventListener("icFileSelection", (ev) => {
2341
+ const fileArray = ev.detail;
2342
+ const fileList = [];
2343
+ Array.from(fileArray).forEach((file) => {
2344
+ fileList.push(file.name);
2345
+ });
2346
+ descEl.innerText = "Files Selected: " + fileList.join(", ");
2347
+ file = ev;
2348
+ });
2349
+ document.querySelector("form").addEventListener("submit", (ev) => {
2350
+ if (file == undefined) return;
2351
+ });
2352
+ </script>
2353
+ `,
2354
+
2355
+ name: "File upload in a form",
2356
+ };
2357
+
2358
+ export const FileUpload = {
2359
+ render: (args) => html`
2360
+ <span id="selected-file">No File Selected</span>
2361
+ <div style="padding: 6px">
2362
+ <ic-button
2363
+ variant="primary"
2364
+ id="file-button"
2365
+ file-upload="true"
2366
+ accept=".doc, text/plain, .json"
2367
+ >Upload File true</ic-button
2368
+ >
2369
+ </div>
2370
+ <script>
2371
+ var descEl = document.querySelector("#selected-file");
2372
+ var file;
2373
+ onclick = document
2374
+ .querySelector("#file-button")
2375
+ .addEventListener("icFileSelection", (ev) => {
2376
+ const fileArray = ev.detail;
2377
+ const fileList = [];
2378
+ Array.from(fileArray).forEach((file) => {
2379
+ fileList.push(file.name);
2380
+ });
2381
+ descEl.innerText = "Files Selected: " + fileList.join(", ");
2382
+ });
2383
+ </script>
2384
+ `,
2385
+
2386
+ name: "File upload",
2387
+ };