@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

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 (594) hide show
  1. package/dist/.storybook/utilities.js +4 -4
  2. package/dist/api.js.map +2 -2
  3. package/dist/custom-elements.json +68 -56
  4. package/dist/docs/affix/affix.md +2 -2
  5. package/dist/docs/affix/api.md +2 -2
  6. package/dist/docs/alert/alert.md +4 -4
  7. package/dist/docs/alert/api.md +4 -4
  8. package/dist/docs/attention/api.md +2 -2
  9. package/dist/docs/attention/attention.md +2 -2
  10. package/dist/docs/badge/api.md +50 -4
  11. package/dist/docs/badge/badge.md +50 -4
  12. package/dist/docs/box/api.md +2 -2
  13. package/dist/docs/box/box.md +2 -2
  14. package/dist/docs/checkbox/api.md +2 -2
  15. package/dist/docs/checkbox/checkbox.md +176 -2
  16. package/dist/docs/checkbox/styling.md +173 -0
  17. package/dist/docs/checkbox-group/checkbox-group.md +43 -30
  18. package/dist/docs/checkbox-group/styling.md +31 -29
  19. package/dist/docs/combobox/api.md +12 -12
  20. package/dist/docs/combobox/combobox.md +12 -12
  21. package/dist/docs/datepicker/api.md +6 -6
  22. package/dist/docs/datepicker/datepicker.md +6 -6
  23. package/dist/docs/icon/api.md +3 -3
  24. package/dist/docs/icon/icon.md +3 -3
  25. package/dist/docs/index.md +1 -1
  26. package/dist/docs/radio-group/api.md +4 -4
  27. package/dist/docs/radio-group/radio-group.md +183 -68
  28. package/dist/docs/radio-group/styling.md +179 -64
  29. package/dist/docs/snackbar/api.md +1 -1
  30. package/dist/docs/snackbar/snackbar.md +1 -1
  31. package/dist/docs/snackbar-item/api.md +2 -2
  32. package/dist/docs/snackbar-item/snackbar-item.md +2 -2
  33. package/dist/index.d.ts +24 -2
  34. package/dist/packages/affix/affix.d.ts +4 -4
  35. package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
  36. package/dist/packages/affix/affix.hydration.test.js +15 -15
  37. package/dist/packages/affix/affix.js +345 -315
  38. package/dist/packages/affix/affix.js.map +2 -2
  39. package/dist/packages/affix/affix.react.stories.d.ts +2 -2
  40. package/dist/packages/affix/affix.react.stories.js +3 -3
  41. package/dist/packages/affix/affix.react.test.js +5 -3
  42. package/dist/packages/affix/affix.stories.d.ts +3 -3
  43. package/dist/packages/affix/affix.stories.js +10 -10
  44. package/dist/packages/affix/affix.test.d.ts +1 -1
  45. package/dist/packages/affix/affix.test.js +10 -10
  46. package/dist/packages/affix/react.d.ts +2 -2
  47. package/dist/packages/affix/react.js +6 -6
  48. package/dist/packages/affix/styles.js +1 -1
  49. package/dist/packages/alert/alert.d.ts +3 -3
  50. package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
  51. package/dist/packages/alert/alert.hydration.test.js +21 -21
  52. package/dist/packages/alert/alert.js +344 -319
  53. package/dist/packages/alert/alert.js.map +2 -2
  54. package/dist/packages/alert/alert.react.stories.d.ts +2 -2
  55. package/dist/packages/alert/alert.react.stories.js +13 -13
  56. package/dist/packages/alert/alert.stories.d.ts +4 -4
  57. package/dist/packages/alert/alert.stories.js +29 -27
  58. package/dist/packages/alert/alert.test.d.ts +1 -1
  59. package/dist/packages/alert/alert.test.js +34 -21
  60. package/dist/packages/alert/react.d.ts +1 -1
  61. package/dist/packages/alert/react.js +4 -4
  62. package/dist/packages/alert/styles.js +1 -1
  63. package/dist/packages/attention/attention.d.ts +7 -7
  64. package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
  65. package/dist/packages/attention/attention.hydration.test.js +29 -29
  66. package/dist/packages/attention/attention.js +1725 -1683
  67. package/dist/packages/attention/attention.js.map +2 -2
  68. package/dist/packages/attention/attention.react.stories.d.ts +3 -3
  69. package/dist/packages/attention/attention.react.stories.js +13 -13
  70. package/dist/packages/attention/attention.react.test.js +11 -7
  71. package/dist/packages/attention/attention.stories.d.ts +4 -4
  72. package/dist/packages/attention/attention.stories.js +126 -117
  73. package/dist/packages/attention/attention.test.d.ts +1 -1
  74. package/dist/packages/attention/attention.test.js +18 -10
  75. package/dist/packages/attention/layout-styles.js +900 -900
  76. package/dist/packages/attention/react.d.ts +4 -4
  77. package/dist/packages/attention/react.js +13 -11
  78. package/dist/packages/attention/styles.js +1 -1
  79. package/dist/packages/badge/badge.d.ts +3 -3
  80. package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
  81. package/dist/packages/badge/badge.hydration.test.js +25 -25
  82. package/dist/packages/badge/badge.js +276 -276
  83. package/dist/packages/badge/badge.js.map +2 -2
  84. package/dist/packages/badge/badge.react.stories.d.ts +3 -3
  85. package/dist/packages/badge/badge.react.stories.js +17 -17
  86. package/dist/packages/badge/badge.stories.d.ts +3 -3
  87. package/dist/packages/badge/badge.stories.js +22 -20
  88. package/dist/packages/badge/badge.test.d.ts +1 -1
  89. package/dist/packages/badge/badge.test.js +13 -11
  90. package/dist/packages/badge/react.d.ts +1 -1
  91. package/dist/packages/badge/react.js +4 -4
  92. package/dist/packages/badge/styles.js +1 -1
  93. package/dist/packages/box/box.d.ts +1 -1
  94. package/dist/packages/box/box.hydration.test.d.ts +1 -1
  95. package/dist/packages/box/box.hydration.test.js +14 -14
  96. package/dist/packages/box/box.js +283 -283
  97. package/dist/packages/box/box.js.map +2 -2
  98. package/dist/packages/box/box.react.stories.d.ts +3 -3
  99. package/dist/packages/box/box.react.stories.js +8 -8
  100. package/dist/packages/box/box.stories.d.ts +3 -3
  101. package/dist/packages/box/box.stories.js +25 -19
  102. package/dist/packages/box/box.test.d.ts +1 -1
  103. package/dist/packages/box/box.test.js +6 -6
  104. package/dist/packages/box/react.d.ts +1 -1
  105. package/dist/packages/box/react.js +4 -4
  106. package/dist/packages/box/slot.test.d.ts +1 -1
  107. package/dist/packages/box/slot.test.js +6 -6
  108. package/dist/packages/box/styles.js +1 -1
  109. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +1 -1
  110. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
  111. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +55 -49
  112. package/dist/packages/breadcrumbs/breadcrumbs.js +284 -278
  113. package/dist/packages/breadcrumbs/breadcrumbs.js.map +2 -2
  114. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +3 -3
  115. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +6 -6
  116. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +3 -3
  117. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +27 -26
  118. package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
  119. package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
  120. package/dist/packages/breadcrumbs/react.d.ts +1 -1
  121. package/dist/packages/breadcrumbs/react.js +4 -4
  122. package/dist/packages/breadcrumbs/styles.js +1 -1
  123. package/dist/packages/button/button.d.ts +5 -5
  124. package/dist/packages/button/button.hydration.test.d.ts +1 -1
  125. package/dist/packages/button/button.hydration.test.js +19 -19
  126. package/dist/packages/button/button.js +741 -715
  127. package/dist/packages/button/button.js.map +2 -2
  128. package/dist/packages/button/button.react.stories.d.ts +3 -3
  129. package/dist/packages/button/button.react.stories.js +30 -30
  130. package/dist/packages/button/button.react.test.js +13 -13
  131. package/dist/packages/button/button.stories.d.ts +4 -4
  132. package/dist/packages/button/button.stories.js +276 -167
  133. package/dist/packages/button/button.test.d.ts +1 -1
  134. package/dist/packages/button/button.test.js +36 -34
  135. package/dist/packages/button/react.d.ts +2 -2
  136. package/dist/packages/button/react.js +7 -7
  137. package/dist/packages/button/styles.js +373 -347
  138. package/dist/packages/card/card.d.ts +1 -1
  139. package/dist/packages/card/card.hydration.test.d.ts +1 -1
  140. package/dist/packages/card/card.hydration.test.js +14 -14
  141. package/dist/packages/card/card.js +305 -290
  142. package/dist/packages/card/card.js.map +2 -2
  143. package/dist/packages/card/card.react.stories.d.ts +3 -3
  144. package/dist/packages/card/card.react.stories.js +11 -11
  145. package/dist/packages/card/card.stories.d.ts +3 -3
  146. package/dist/packages/card/card.stories.js +36 -24
  147. package/dist/packages/card/card.test.d.ts +1 -1
  148. package/dist/packages/card/card.test.js +6 -6
  149. package/dist/packages/card/react.d.ts +1 -1
  150. package/dist/packages/card/react.js +4 -4
  151. package/dist/packages/card/styles.js +1 -1
  152. package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
  153. package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
  154. package/dist/packages/checkbox/checkbox.d.ts +2 -2
  155. package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
  156. package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
  157. package/dist/packages/checkbox/checkbox.js +475 -424
  158. package/dist/packages/checkbox/checkbox.js.map +2 -2
  159. package/dist/packages/checkbox/checkbox.react.stories.d.ts +2 -2
  160. package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
  161. package/dist/packages/checkbox/checkbox.stories.d.ts +4 -4
  162. package/dist/packages/checkbox/checkbox.stories.js +99 -91
  163. package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
  164. package/dist/packages/checkbox/checkbox.test.js +64 -64
  165. package/dist/packages/checkbox/react.d.ts +1 -1
  166. package/dist/packages/checkbox/react.js +6 -6
  167. package/dist/packages/checkbox/styles.js +183 -132
  168. package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
  169. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
  170. package/dist/packages/checkbox-group/checkbox-group.d.ts +16 -2
  171. package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
  172. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
  173. package/dist/packages/checkbox-group/checkbox-group.js +60 -55
  174. package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
  175. package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
  176. package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
  177. package/dist/packages/checkbox-group/checkbox-group.test.js +96 -90
  178. package/dist/packages/checkbox-group/react.d.ts +2 -2
  179. package/dist/packages/checkbox-group/react.js +6 -6
  180. package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
  181. package/dist/packages/combobox/combobox.a11y.test.js +72 -49
  182. package/dist/packages/combobox/combobox.d.ts +2 -2
  183. package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
  184. package/dist/packages/combobox/combobox.hydration.test.js +45 -45
  185. package/dist/packages/combobox/combobox.js +332 -332
  186. package/dist/packages/combobox/combobox.js.map +3 -3
  187. package/dist/packages/combobox/combobox.react.stories.d.ts +3 -3
  188. package/dist/packages/combobox/combobox.react.stories.js +29 -29
  189. package/dist/packages/combobox/combobox.react.test.js +8 -8
  190. package/dist/packages/combobox/combobox.stories.d.ts +4 -4
  191. package/dist/packages/combobox/combobox.stories.js +100 -94
  192. package/dist/packages/combobox/combobox.test.d.ts +2 -2
  193. package/dist/packages/combobox/combobox.test.js +148 -133
  194. package/dist/packages/combobox/react.d.ts +2 -2
  195. package/dist/packages/combobox/react.js +14 -14
  196. package/dist/packages/combobox/styles.js +1 -1
  197. package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
  198. package/dist/packages/datepicker/DatePicker.test.js +46 -41
  199. package/dist/packages/datepicker/datepicker.d.ts +3 -3
  200. package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
  201. package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
  202. package/dist/packages/datepicker/datepicker.js +665 -625
  203. package/dist/packages/datepicker/datepicker.js.map +3 -3
  204. package/dist/packages/datepicker/datepicker.react.stories.d.ts +3 -3
  205. package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
  206. package/dist/packages/datepicker/datepicker.react.test.js +6 -6
  207. package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
  208. package/dist/packages/datepicker/datepicker.stories.js +32 -32
  209. package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
  210. package/dist/packages/datepicker/datepicker.test.js +77 -79
  211. package/dist/packages/datepicker/react.d.ts +2 -2
  212. package/dist/packages/datepicker/react.js +16 -14
  213. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
  214. package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
  215. package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
  216. package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
  217. package/dist/packages/datepicker/utils.d.ts +1 -1
  218. package/dist/packages/datepicker/utils.js +25 -19
  219. package/dist/packages/datepicker/utils.test.js +20 -20
  220. package/dist/packages/expandable/expandable.d.ts +4 -4
  221. package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
  222. package/dist/packages/expandable/expandable.hydration.test.js +21 -21
  223. package/dist/packages/expandable/expandable.js +353 -326
  224. package/dist/packages/expandable/expandable.js.map +2 -2
  225. package/dist/packages/expandable/expandable.react.stories.d.ts +3 -3
  226. package/dist/packages/expandable/expandable.react.stories.js +7 -7
  227. package/dist/packages/expandable/expandable.react.test.js +15 -7
  228. package/dist/packages/expandable/expandable.stories.d.ts +5 -5
  229. package/dist/packages/expandable/expandable.stories.js +51 -45
  230. package/dist/packages/expandable/expandable.test.d.ts +1 -1
  231. package/dist/packages/expandable/expandable.test.js +19 -17
  232. package/dist/packages/expandable/react.d.ts +2 -2
  233. package/dist/packages/expandable/react.js +9 -9
  234. package/dist/packages/expandable/styles.js +1 -1
  235. package/dist/packages/global.js +2 -2
  236. package/dist/packages/i18n.d.ts +1 -1
  237. package/dist/packages/i18n.js +37 -29
  238. package/dist/packages/icon/icon.d.ts +3 -3
  239. package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
  240. package/dist/packages/icon/icon.hydration.test.js +25 -25
  241. package/dist/packages/icon/icon.js +30 -25
  242. package/dist/packages/icon/icon.js.map +2 -2
  243. package/dist/packages/icon/icon.react.stories.d.ts +1 -1
  244. package/dist/packages/icon/icon.react.stories.js +283 -284
  245. package/dist/packages/icon/icon.stories.d.ts +3 -3
  246. package/dist/packages/icon/icon.stories.js +299 -298
  247. package/dist/packages/icon/icon.test.d.ts +1 -1
  248. package/dist/packages/icon/icon.test.js +36 -28
  249. package/dist/packages/icon/react.d.ts +1 -1
  250. package/dist/packages/icon/react.js +4 -4
  251. package/dist/packages/icon/style.js +24 -25
  252. package/dist/packages/interaction-type-detection.js +9 -9
  253. package/dist/packages/link/link.d.ts +2 -2
  254. package/dist/packages/link/link.hydration.test.d.ts +1 -1
  255. package/dist/packages/link/link.hydration.test.js +27 -27
  256. package/dist/packages/link/link.js +709 -683
  257. package/dist/packages/link/link.js.map +2 -2
  258. package/dist/packages/link/link.react.stories.d.ts +3 -3
  259. package/dist/packages/link/link.react.stories.js +42 -42
  260. package/dist/packages/link/link.react.test.js +5 -3
  261. package/dist/packages/link/link.stories.d.ts +3 -3
  262. package/dist/packages/link/link.stories.js +51 -51
  263. package/dist/packages/link/link.test.d.ts +1 -1
  264. package/dist/packages/link/link.test.js +11 -7
  265. package/dist/packages/link/react.d.ts +2 -2
  266. package/dist/packages/link/react.js +6 -6
  267. package/dist/packages/link/styles.js +57 -57
  268. package/dist/packages/modal/index.d.ts +7 -7
  269. package/dist/packages/modal/index.js +7 -7
  270. package/dist/packages/modal/modal.d.ts +1 -1
  271. package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
  272. package/dist/packages/modal/modal.hydration.test.js +12 -12
  273. package/dist/packages/modal/modal.js +404 -404
  274. package/dist/packages/modal/modal.js.map +2 -2
  275. package/dist/packages/modal/modal.react.stories.d.ts +3 -3
  276. package/dist/packages/modal/modal.react.stories.js +7 -6
  277. package/dist/packages/modal/modal.react.test.js +5 -5
  278. package/dist/packages/modal/modal.stories.d.ts +6 -6
  279. package/dist/packages/modal/modal.stories.js +253 -238
  280. package/dist/packages/modal/react.d.ts +4 -4
  281. package/dist/packages/modal/react.js +13 -13
  282. package/dist/packages/modal/util.js +2 -2
  283. package/dist/packages/modal-footer/modal-footer.d.ts +1 -1
  284. package/dist/packages/modal-footer/modal-footer.js +291 -291
  285. package/dist/packages/modal-footer/modal-footer.js.map +2 -2
  286. package/dist/packages/modal-footer/react.d.ts +1 -1
  287. package/dist/packages/modal-footer/react.js +4 -4
  288. package/dist/packages/modal-header/modal-header.d.ts +2 -2
  289. package/dist/packages/modal-header/modal-header.js +437 -416
  290. package/dist/packages/modal-header/modal-header.js.map +2 -2
  291. package/dist/packages/modal-header/modal-header.react.test.js +5 -3
  292. package/dist/packages/modal-header/react.d.ts +2 -2
  293. package/dist/packages/modal-header/react.js +8 -8
  294. package/dist/packages/page-indicator/page-indicator.d.ts +1 -1
  295. package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
  296. package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
  297. package/dist/packages/page-indicator/page-indicator.js +26 -26
  298. package/dist/packages/page-indicator/page-indicator.js.map +2 -2
  299. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
  300. package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
  301. package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
  302. package/dist/packages/page-indicator/page-indicator.stories.d.ts +3 -3
  303. package/dist/packages/page-indicator/page-indicator.stories.js +56 -27
  304. package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
  305. package/dist/packages/page-indicator/page-indicator.test.js +110 -70
  306. package/dist/packages/page-indicator/react.d.ts +2 -2
  307. package/dist/packages/page-indicator/react.js +7 -7
  308. package/dist/packages/page-indicator/style.js +21 -21
  309. package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
  310. package/dist/packages/pagination/pagination.a11y.test.js +59 -25
  311. package/dist/packages/pagination/pagination.d.ts +3 -3
  312. package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
  313. package/dist/packages/pagination/pagination.hydration.test.js +19 -19
  314. package/dist/packages/pagination/pagination.js +380 -349
  315. package/dist/packages/pagination/pagination.js.map +2 -2
  316. package/dist/packages/pagination/pagination.react.stories.d.ts +5 -5
  317. package/dist/packages/pagination/pagination.react.stories.js +8 -8
  318. package/dist/packages/pagination/pagination.react.test.js +6 -6
  319. package/dist/packages/pagination/pagination.stories.d.ts +3 -3
  320. package/dist/packages/pagination/pagination.stories.js +18 -18
  321. package/dist/packages/pagination/pagination.test.d.ts +1 -1
  322. package/dist/packages/pagination/pagination.test.js +146 -69
  323. package/dist/packages/pagination/react.d.ts +3 -3
  324. package/dist/packages/pagination/react.js +12 -10
  325. package/dist/packages/pagination/styles.js +1 -1
  326. package/dist/packages/pill/pill.d.ts +2 -2
  327. package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
  328. package/dist/packages/pill/pill.hydration.test.js +14 -14
  329. package/dist/packages/pill/pill.js +331 -308
  330. package/dist/packages/pill/pill.js.map +2 -2
  331. package/dist/packages/pill/pill.react.stories.d.ts +3 -3
  332. package/dist/packages/pill/pill.react.stories.js +3 -3
  333. package/dist/packages/pill/pill.react.test.js +8 -8
  334. package/dist/packages/pill/pill.stories.d.ts +3 -3
  335. package/dist/packages/pill/pill.stories.js +8 -8
  336. package/dist/packages/pill/pill.test.d.ts +1 -1
  337. package/dist/packages/pill/pill.test.js +17 -15
  338. package/dist/packages/pill/react.d.ts +2 -2
  339. package/dist/packages/pill/react.js +18 -14
  340. package/dist/packages/pill/styles.js +1 -1
  341. package/dist/packages/radio/base-element.d.ts +3 -3
  342. package/dist/packages/radio/base-element.js +3 -3
  343. package/dist/packages/radio/custom-error-validator.d.ts +1 -1
  344. package/dist/packages/radio/custom-error-validator.js +3 -3
  345. package/dist/packages/radio/form-associated-element.d.ts +8 -8
  346. package/dist/packages/radio/form-associated-element.js +27 -26
  347. package/dist/packages/radio/host-styles.js +9 -9
  348. package/dist/packages/radio/invalid.d.ts +1 -1
  349. package/dist/packages/radio/invalid.js +1 -1
  350. package/dist/packages/radio/radio-styles.js +199 -160
  351. package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
  352. package/dist/packages/radio/radio.a11y.test.js +60 -58
  353. package/dist/packages/radio/radio.d.ts +3 -3
  354. package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
  355. package/dist/packages/radio/radio.hydration.test.js +23 -14
  356. package/dist/packages/radio/radio.js +485 -446
  357. package/dist/packages/radio/radio.js.map +3 -3
  358. package/dist/packages/radio/radio.react.stories.d.ts +2 -2
  359. package/dist/packages/radio/radio.react.stories.js +3 -3
  360. package/dist/packages/radio/radio.stories.d.ts +4 -4
  361. package/dist/packages/radio/radio.stories.js +152 -136
  362. package/dist/packages/radio/radio.test.d.ts +1 -1
  363. package/dist/packages/radio/radio.test.js +74 -73
  364. package/dist/packages/radio/react.d.ts +1 -1
  365. package/dist/packages/radio/react.js +4 -4
  366. package/dist/packages/radio/required-validator.d.ts +1 -1
  367. package/dist/packages/radio/required-validator.js +12 -7
  368. package/dist/packages/radio/slot.d.ts +1 -1
  369. package/dist/packages/radio/slot.js +11 -8
  370. package/dist/packages/radio/watch.d.ts +1 -1
  371. package/dist/packages/radio/watch.js +3 -1
  372. package/dist/packages/radio-group/radio-group-styles.js +121 -88
  373. package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
  374. package/dist/packages/radio-group/radio-group.a11y.test.js +81 -79
  375. package/dist/packages/radio-group/radio-group.d.ts +14 -5
  376. package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
  377. package/dist/packages/radio-group/radio-group.hydration.test.js +29 -18
  378. package/dist/packages/radio-group/radio-group.js +648 -560
  379. package/dist/packages/radio-group/radio-group.js.map +3 -3
  380. package/dist/packages/radio-group/radio-group.react.test.js +4 -4
  381. package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
  382. package/dist/packages/radio-group/radio-group.test.js +234 -229
  383. package/dist/packages/radio-group/react.d.ts +2 -2
  384. package/dist/packages/radio-group/react.js +10 -10
  385. package/dist/packages/select/react.d.ts +2 -2
  386. package/dist/packages/select/react.js +11 -11
  387. package/dist/packages/select/select.a11y.test.d.ts +1 -1
  388. package/dist/packages/select/select.a11y.test.js +98 -91
  389. package/dist/packages/select/select.d.ts +4 -4
  390. package/dist/packages/select/select.hydration.test.d.ts +1 -1
  391. package/dist/packages/select/select.hydration.test.js +16 -16
  392. package/dist/packages/select/select.js +348 -329
  393. package/dist/packages/select/select.js.map +2 -2
  394. package/dist/packages/select/select.react.stories.d.ts +3 -3
  395. package/dist/packages/select/select.react.stories.js +7 -7
  396. package/dist/packages/select/select.react.test.js +6 -6
  397. package/dist/packages/select/select.stories.d.ts +3 -3
  398. package/dist/packages/select/select.stories.js +51 -48
  399. package/dist/packages/select/select.test.d.ts +1 -1
  400. package/dist/packages/select/select.test.js +175 -178
  401. package/dist/packages/select/styles.js +1 -1
  402. package/dist/packages/slider/Slider.d.ts +1 -1
  403. package/dist/packages/slider/Slider.js +4 -4
  404. package/dist/packages/slider/index.d.ts +2 -2
  405. package/dist/packages/slider/index.js +2 -2
  406. package/dist/packages/slider/react.d.ts +3 -3
  407. package/dist/packages/slider/react.js +9 -9
  408. package/dist/packages/slider/slider.d.ts +3 -3
  409. package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
  410. package/dist/packages/slider/slider.hydration.test.js +39 -20
  411. package/dist/packages/slider/slider.js +480 -462
  412. package/dist/packages/slider/slider.js.map +2 -2
  413. package/dist/packages/slider/slider.react.stories.d.ts +3 -3
  414. package/dist/packages/slider/slider.react.stories.js +31 -34
  415. package/dist/packages/slider/slider.react.test.js +6 -6
  416. package/dist/packages/slider/slider.stories.d.ts +7 -7
  417. package/dist/packages/slider/slider.stories.js +332 -340
  418. package/dist/packages/slider/slider.test.d.ts +5 -5
  419. package/dist/packages/slider/slider.test.js +367 -334
  420. package/dist/packages/slider/styles/w-slider.styles.js +166 -148
  421. package/dist/packages/slider/styles.js +1 -1
  422. package/dist/packages/slider-thumb/SliderThumb.d.ts +1 -1
  423. package/dist/packages/slider-thumb/SliderThumb.js +4 -4
  424. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
  425. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
  426. package/dist/packages/slider-thumb/react.d.ts +3 -3
  427. package/dist/packages/slider-thumb/react.js +11 -9
  428. package/dist/packages/slider-thumb/slider-thumb.d.ts +3 -3
  429. package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
  430. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
  431. package/dist/packages/slider-thumb/slider-thumb.js +545 -548
  432. package/dist/packages/slider-thumb/slider-thumb.js.map +3 -3
  433. package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
  434. package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
  435. package/dist/packages/slider-thumb/styles.js +1 -1
  436. package/dist/packages/snackbar/react.d.ts +1 -1
  437. package/dist/packages/snackbar/react.js +4 -4
  438. package/dist/packages/snackbar/snackbar.d.ts +3 -3
  439. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -1
  440. package/dist/packages/snackbar/snackbar.hydration.test.js +6 -6
  441. package/dist/packages/snackbar/snackbar.js +487 -468
  442. package/dist/packages/snackbar/snackbar.js.map +2 -2
  443. package/dist/packages/snackbar/snackbar.react.stories.js +3 -3
  444. package/dist/packages/snackbar/snackbar.stories.d.ts +11 -11
  445. package/dist/packages/snackbar/snackbar.stories.js +253 -181
  446. package/dist/packages/snackbar/snackbar.test.d.ts +4 -4
  447. package/dist/packages/snackbar/snackbar.test.js +11 -11
  448. package/dist/packages/snackbar/styles.js +29 -29
  449. package/dist/packages/snackbar-item/react.d.ts +2 -2
  450. package/dist/packages/snackbar-item/react.js +6 -5
  451. package/dist/packages/snackbar-item/snackbar-item.d.ts +4 -4
  452. package/dist/packages/snackbar-item/snackbar-item.js +454 -435
  453. package/dist/packages/snackbar-item/snackbar-item.js.map +2 -2
  454. package/dist/packages/snackbar-item/snackbar-item.react.test.js +4 -4
  455. package/dist/packages/snackbar-item/styles.js +130 -108
  456. package/dist/packages/step/react.d.ts +1 -1
  457. package/dist/packages/step/react.js +4 -4
  458. package/dist/packages/step/step.d.ts +2 -2
  459. package/dist/packages/step/step.hydration.test.d.ts +1 -1
  460. package/dist/packages/step/step.hydration.test.js +10 -10
  461. package/dist/packages/step/step.js +330 -308
  462. package/dist/packages/step/step.js.map +2 -2
  463. package/dist/packages/step-indicator/index.d.ts +2 -2
  464. package/dist/packages/step-indicator/index.js +2 -2
  465. package/dist/packages/step-indicator/react.d.ts +2 -2
  466. package/dist/packages/step-indicator/react.js +5 -5
  467. package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
  468. package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
  469. package/dist/packages/step-indicator/step-indicator.d.ts +1 -1
  470. package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
  471. package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
  472. package/dist/packages/step-indicator/step-indicator.js +280 -276
  473. package/dist/packages/step-indicator/step-indicator.js.map +2 -2
  474. package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
  475. package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
  476. package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
  477. package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
  478. package/dist/packages/step-indicator/styles.js +1 -1
  479. package/dist/packages/styles.js +274 -274
  480. package/dist/packages/switch/react.d.ts +1 -1
  481. package/dist/packages/switch/react.js +6 -6
  482. package/dist/packages/switch/styles.js +1 -1
  483. package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
  484. package/dist/packages/switch/switch.a11y.test.js +46 -38
  485. package/dist/packages/switch/switch.d.ts +1 -1
  486. package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
  487. package/dist/packages/switch/switch.hydration.test.js +23 -23
  488. package/dist/packages/switch/switch.js +299 -299
  489. package/dist/packages/switch/switch.js.map +2 -2
  490. package/dist/packages/switch/switch.react.stories.d.ts +2 -2
  491. package/dist/packages/switch/switch.react.stories.js +2 -2
  492. package/dist/packages/switch/switch.stories.d.ts +2 -2
  493. package/dist/packages/switch/switch.stories.js +42 -37
  494. package/dist/packages/switch/switch.test.d.ts +1 -1
  495. package/dist/packages/switch/switch.test.js +30 -35
  496. package/dist/packages/tab/react.d.ts +6 -4
  497. package/dist/packages/tab/react.js +11 -10
  498. package/dist/packages/tab/styles.d.ts +1 -0
  499. package/dist/packages/tab/styles.js +2 -0
  500. package/dist/packages/tab/tab.d.ts +5 -5
  501. package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
  502. package/dist/packages/tab/tab.hydration.test.js +18 -12
  503. package/dist/packages/tab/tab.js +305 -304
  504. package/dist/packages/tab/tab.js.map +3 -3
  505. package/dist/packages/tab/tab.react.test.js +5 -3
  506. package/dist/packages/tab-panel/react.d.ts +3 -2
  507. package/dist/packages/tab-panel/react.js +11 -5
  508. package/dist/packages/tab-panel/tab-panel.d.ts +3 -3
  509. package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
  510. package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
  511. package/dist/packages/tab-panel/tab-panel.js +289 -287
  512. package/dist/packages/tab-panel/tab-panel.js.map +2 -2
  513. package/dist/packages/tabs/index.d.ts +4 -4
  514. package/dist/packages/tabs/index.js +3 -3
  515. package/dist/packages/tabs/react.d.ts +27 -8
  516. package/dist/packages/tabs/react.js +30 -9
  517. package/dist/packages/tabs/styles.js +1 -1
  518. package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
  519. package/dist/packages/tabs/tabs.a11y.test.js +188 -169
  520. package/dist/packages/tabs/tabs.d.ts +3 -3
  521. package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
  522. package/dist/packages/tabs/tabs.hydration.test.js +22 -8
  523. package/dist/packages/tabs/tabs.js +289 -282
  524. package/dist/packages/tabs/tabs.js.map +2 -2
  525. package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
  526. package/dist/packages/tabs/tabs.react.stories.js +28 -28
  527. package/dist/packages/tabs/tabs.stories.d.ts +4 -4
  528. package/dist/packages/tabs/tabs.stories.js +101 -95
  529. package/dist/packages/tabs/tabs.test.d.ts +3 -3
  530. package/dist/packages/tabs/tabs.test.js +136 -122
  531. package/dist/packages/textarea/react.d.ts +2 -2
  532. package/dist/packages/textarea/react.js +17 -17
  533. package/dist/packages/textarea/styles.js +1 -1
  534. package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
  535. package/dist/packages/textarea/textarea.a11y.test.js +89 -57
  536. package/dist/packages/textarea/textarea.d.ts +1 -1
  537. package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
  538. package/dist/packages/textarea/textarea.hydration.test.js +19 -19
  539. package/dist/packages/textarea/textarea.js +300 -298
  540. package/dist/packages/textarea/textarea.js.map +2 -2
  541. package/dist/packages/textarea/textarea.react.stories.d.ts +3 -3
  542. package/dist/packages/textarea/textarea.react.stories.js +13 -13
  543. package/dist/packages/textarea/textarea.react.test.js +7 -7
  544. package/dist/packages/textarea/textarea.stories.d.ts +3 -3
  545. package/dist/packages/textarea/textarea.stories.js +44 -42
  546. package/dist/packages/textarea/textarea.test.d.ts +1 -1
  547. package/dist/packages/textarea/textarea.test.js +124 -88
  548. package/dist/packages/textfield/react.d.ts +2 -2
  549. package/dist/packages/textfield/react.js +17 -17
  550. package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
  551. package/dist/packages/textfield/styles.js +1 -1
  552. package/dist/packages/textfield/textfield.d.ts +3 -3
  553. package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
  554. package/dist/packages/textfield/textfield.hydration.test.js +19 -19
  555. package/dist/packages/textfield/textfield.js +376 -368
  556. package/dist/packages/textfield/textfield.js.map +3 -3
  557. package/dist/packages/textfield/textfield.react.stories.d.ts +3 -3
  558. package/dist/packages/textfield/textfield.react.stories.js +31 -31
  559. package/dist/packages/textfield/textfield.react.test.js +7 -7
  560. package/dist/packages/textfield/textfield.stories.d.ts +4 -4
  561. package/dist/packages/textfield/textfield.stories.js +107 -89
  562. package/dist/packages/textfield/textfield.test.d.ts +2 -2
  563. package/dist/packages/textfield/textfield.test.js +103 -71
  564. package/dist/packages/toast/api.d.ts +1 -1
  565. package/dist/packages/toast/api.js +3 -3
  566. package/dist/packages/toast/index.d.ts +5 -5
  567. package/dist/packages/toast/index.js +5 -5
  568. package/dist/packages/toast/toast.d.ts +4 -4
  569. package/dist/packages/toast/toast.js +343 -314
  570. package/dist/packages/toast/toast.js.map +2 -2
  571. package/dist/packages/toast/toast.stories.d.ts +4 -4
  572. package/dist/packages/toast/toast.stories.js +37 -16
  573. package/dist/packages/toast/toast.test.d.ts +1 -1
  574. package/dist/packages/toast/toast.test.js +48 -31
  575. package/dist/packages/toast/types.d.ts +1 -1
  576. package/dist/packages/toast-container/styles.js +1 -1
  577. package/dist/packages/toast-container/toast-container.d.ts +2 -2
  578. package/dist/packages/toast-container/toast-container.js +291 -290
  579. package/dist/packages/toast-container/toast-container.js.map +2 -2
  580. package/dist/packages/utils/element-collapse.js +38 -28
  581. package/dist/packages/utils/expand-transition.d.ts +1 -1
  582. package/dist/packages/utils/expand-transition.js +12 -10
  583. package/dist/packages/utils/unstyled-heading.d.ts +1 -1
  584. package/dist/packages/utils/unstyled-heading.js +4 -4
  585. package/dist/packages/utils/window-exists.js +1 -1
  586. package/dist/packages/utils.js +2 -2
  587. package/dist/setup-tests.d.ts +3 -3
  588. package/dist/setup-tests.js +16 -13
  589. package/dist/tests/react-hydration.js +29 -30
  590. package/dist/tests/react-ssr-attributes.d.ts +1 -1
  591. package/dist/tests/react-ssr-attributes.js +4 -4
  592. package/dist/web-types.json +25 -22
  593. package/eik/index.js +9 -9
  594. package/package.json +11 -16
@@ -1,126 +1,128 @@
1
- import { spread } from '@open-wc/lit-helpers';
2
- import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
3
- import { html } from 'lit';
4
- import { prespread } from '../../.storybook/utilities.js';
5
- import './modal.js';
6
- import '../modal-header/modal-header.js';
7
- import '../modal-footer/modal-footer.js';
8
- const { events: modalEvents, args: modalArgs, argTypes: modalArgTypes } = getStorybookHelpers('w-modal');
9
- const { events: modalHeaderEvents, args: modalHeaderArgs, argTypes: modalHeaderArgTypes, } = getStorybookHelpers('w-modal-header');
10
- const { events: modalFooterEvents, args: modalFooterArgs, argTypes: modalFooterArgTypes, } = getStorybookHelpers('w-modal-footer');
1
+ import { spread } from "@open-wc/lit-helpers";
2
+ import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
3
+ import { html } from "lit";
4
+ import { prespread } from "../../.storybook/utilities.js";
5
+ import "./modal.js";
6
+ import "../modal-header/modal-header.js";
7
+ import "../modal-footer/modal-footer.js";
8
+ const { events: modalEvents, args: modalArgs, argTypes: modalArgTypes, } = getStorybookHelpers("w-modal");
9
+ const { events: modalHeaderEvents, args: modalHeaderArgs, argTypes: modalHeaderArgTypes, } = getStorybookHelpers("w-modal-header");
10
+ const { events: modalFooterEvents, args: modalFooterArgs, argTypes: modalFooterArgTypes, } = getStorybookHelpers("w-modal-footer");
11
11
  const meta = {
12
- title: 'Overlays/Modal',
12
+ title: "Overlays/Modal",
13
13
  };
14
14
  export default meta;
15
15
  export const Default = {
16
16
  args: {},
17
17
  render() {
18
18
  return html `
19
- <w-button id="modal-open-button-one" aria-haspopup="dialog">Open a modal</w-button>
20
- <w-modal id="example-modal-one">
21
- <w-modal-header
22
- id="modal-header-one"
23
- slot="header"
24
- title="An example modal"
25
- ></w-modal-header>
26
- <div slot="content">
27
- <h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
28
- <div style="margin-bottom: 12px">
29
- <w-button id="modal-toggle-back-one" variant="utility" small
30
- >Toggle back button</w-button
31
- >
32
- </div>
33
- <p>
34
- I bomb atomically, Socrates' philosophies and hypotheses Can't
35
- define how I be droppin' these mockeries Lyrically perform armed
36
- robbery Flee with the lottery, possibly they spotted me
37
- Battle-scarred Shogun, explosion when my pen hits tremendous
38
- Ultra-violet shine blind forensics I inspect view through the future
39
- see millennium Killa Beez sold fifty gold, sixty platinum Shackling
40
- the masses with drastic rap tactics Graphic displays melt the steel
41
- like blacksmiths Black Wu jackets, Queen Beez ease the guns in
42
- Rumble with patrolmen, tear gas laced the function Heads by the
43
- score take flight, incite a war Chicks hit the floor, diehard fans
44
- demand more Behold the bold soldier, control the globe slowly
45
- Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
46
- pound footprints in solid rock Wu got it locked, performin' live on
47
- your hottest block
48
- </p>
49
- <p>
50
- First I'm gonna getcha, once I gotcha, I gat-cha, You could never
51
- capture the Method Man's stature. So uhh, tic toc and keep ticking,
52
- while I get you flipping off what I'm kicking. Yes, the rhythm, the
53
- rebel, alone in my level heat it up past the boiling point of metal.
54
- Shackling the masses with drastic rap tactics, graphic displays melt
55
- the steel like blacksmiths. My beats travel like a vortex through
56
- your spine, to the top of your cerebral cortex. Yes, the rhythm, the
57
- rebel, alone in my level heat it up past the boiling point of metal.
58
- Small change, they putting shame in the game. Murderous material,
59
- made by a madman, it's the mic wrecker, Inspector, bad man.
60
- </p>
61
- <p>
62
- My beats travel like a vortex through your spine, to the top of your
63
- cerebral cortex. The rebel, I make more noise than heavy metal. Now,
64
- lo and behold, another deadly episode, bound to catch another charge
65
- when I explode Perpendicular to the square we stay in gold like
66
- Flair, escape from your dragon's lair in particular. Handcuffed in
67
- the back of a bus, forty of us. Slammin a hype verse til ya head
68
- burst. Handcuffed in the back of a bus, forty of us. I bomb
69
- atomically Socrates' philosophies and hypothesis can't define how I
70
- be dropping these mockeries. I be that insane one from the psycho
71
- ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
72
- your section with the Force like Luke Skywalker, rhyme author,
73
- orchestrate mind torture.
74
- </p>
75
- <p>
76
- It was the night before New Year's all through the projects, not a
77
- handgun was silent, not even a Tec. I smoke on the mic like smoking
78
- Joe Frazier, the hell raiser, raising hell with the flavor. The Wu
79
- is comin thru, the outcome is critical, Muckin wit my style, is sort
80
- of like a Miracle. We got stick-up kids, corrupt cops, and pop
81
- rocks. Step through your section with the Force like Luke Skywalker,
82
- rhyme author, orchestrate mind torture. Rae got it going on pal,
83
- call me the rap assassinator, rhymes rugged and built like
84
- Schwarzenegger.
85
- </p>
86
- </div>
87
- <w-modal-footer slot="footer">
88
- <div class="flex gap-16">
89
- <w-button variant="secondary" id="modal-close-button-cancel"
90
- >Cancel</w-button
91
- >
92
- <w-button variant="primary" id="modal-close-button-one"
93
- >Confirm</w-button
94
- >
95
- </div>
96
- </w-modal-footer>
97
- </w-modal>
98
- `;
19
+ <w-button id="modal-open-button-one" aria-haspopup="dialog"
20
+ >Open a modal</w-button
21
+ >
22
+ <w-modal id="example-modal-one">
23
+ <w-modal-header
24
+ id="modal-header-one"
25
+ slot="header"
26
+ title="An example modal"
27
+ ></w-modal-header>
28
+ <div slot="content">
29
+ <h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
30
+ <div style="margin-bottom: 12px">
31
+ <w-button id="modal-toggle-back-one" variant="utility" small
32
+ >Toggle back button</w-button
33
+ >
34
+ </div>
35
+ <p>
36
+ I bomb atomically, Socrates' philosophies and hypotheses Can't
37
+ define how I be droppin' these mockeries Lyrically perform armed
38
+ robbery Flee with the lottery, possibly they spotted me
39
+ Battle-scarred Shogun, explosion when my pen hits tremendous
40
+ Ultra-violet shine blind forensics I inspect view through the future
41
+ see millennium Killa Beez sold fifty gold, sixty platinum Shackling
42
+ the masses with drastic rap tactics Graphic displays melt the steel
43
+ like blacksmiths Black Wu jackets, Queen Beez ease the guns in
44
+ Rumble with patrolmen, tear gas laced the function Heads by the
45
+ score take flight, incite a war Chicks hit the floor, diehard fans
46
+ demand more Behold the bold soldier, control the globe slowly
47
+ Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
48
+ pound footprints in solid rock Wu got it locked, performin' live on
49
+ your hottest block
50
+ </p>
51
+ <p>
52
+ First I'm gonna getcha, once I gotcha, I gat-cha, You could never
53
+ capture the Method Man's stature. So uhh, tic toc and keep ticking,
54
+ while I get you flipping off what I'm kicking. Yes, the rhythm, the
55
+ rebel, alone in my level heat it up past the boiling point of metal.
56
+ Shackling the masses with drastic rap tactics, graphic displays melt
57
+ the steel like blacksmiths. My beats travel like a vortex through
58
+ your spine, to the top of your cerebral cortex. Yes, the rhythm, the
59
+ rebel, alone in my level heat it up past the boiling point of metal.
60
+ Small change, they putting shame in the game. Murderous material,
61
+ made by a madman, it's the mic wrecker, Inspector, bad man.
62
+ </p>
63
+ <p>
64
+ My beats travel like a vortex through your spine, to the top of your
65
+ cerebral cortex. The rebel, I make more noise than heavy metal. Now,
66
+ lo and behold, another deadly episode, bound to catch another charge
67
+ when I explode Perpendicular to the square we stay in gold like
68
+ Flair, escape from your dragon's lair in particular. Handcuffed in
69
+ the back of a bus, forty of us. Slammin a hype verse til ya head
70
+ burst. Handcuffed in the back of a bus, forty of us. I bomb
71
+ atomically Socrates' philosophies and hypothesis can't define how I
72
+ be dropping these mockeries. I be that insane one from the psycho
73
+ ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
74
+ your section with the Force like Luke Skywalker, rhyme author,
75
+ orchestrate mind torture.
76
+ </p>
77
+ <p>
78
+ It was the night before New Year's all through the projects, not a
79
+ handgun was silent, not even a Tec. I smoke on the mic like smoking
80
+ Joe Frazier, the hell raiser, raising hell with the flavor. The Wu
81
+ is comin thru, the outcome is critical, Muckin wit my style, is sort
82
+ of like a Miracle. We got stick-up kids, corrupt cops, and pop
83
+ rocks. Step through your section with the Force like Luke Skywalker,
84
+ rhyme author, orchestrate mind torture. Rae got it going on pal,
85
+ call me the rap assassinator, rhymes rugged and built like
86
+ Schwarzenegger.
87
+ </p>
88
+ </div>
89
+ <w-modal-footer slot="footer">
90
+ <div class="flex gap-16">
91
+ <w-button variant="secondary" id="modal-close-button-cancel"
92
+ >Cancel</w-button
93
+ >
94
+ <w-button variant="primary" id="modal-close-button-one"
95
+ >Confirm</w-button
96
+ >
97
+ </div>
98
+ </w-modal-footer>
99
+ </w-modal>
100
+ `;
99
101
  },
100
102
  play: async ({ canvasElement }) => {
101
103
  await Promise.all([
102
- customElements.whenDefined('w-button'),
103
- customElements.whenDefined('w-modal'),
104
- customElements.whenDefined('w-modal-header'),
105
- customElements.whenDefined('w-modal-footer'),
104
+ customElements.whenDefined("w-button"),
105
+ customElements.whenDefined("w-modal"),
106
+ customElements.whenDefined("w-modal-header"),
107
+ customElements.whenDefined("w-modal-footer"),
106
108
  ]);
107
- const openButton = canvasElement.querySelector('#modal-open-button-one');
108
- const closeButton = canvasElement.querySelector('#modal-close-button-one');
109
- const toggleBackButton = canvasElement.querySelector('#modal-toggle-back-one');
110
- const cancelButton = canvasElement.querySelector('#modal-close-button-cancel');
111
- const modal = canvasElement.querySelector('#example-modal-one');
112
- const modalHeader = canvasElement.querySelector('#modal-header-one');
109
+ const openButton = canvasElement.querySelector("#modal-open-button-one");
110
+ const closeButton = canvasElement.querySelector("#modal-close-button-one");
111
+ const toggleBackButton = canvasElement.querySelector("#modal-toggle-back-one");
112
+ const cancelButton = canvasElement.querySelector("#modal-close-button-cancel");
113
+ const modal = canvasElement.querySelector("#example-modal-one");
114
+ const modalHeader = canvasElement.querySelector("#modal-header-one");
113
115
  if (openButton && modal) {
114
- openButton.addEventListener('click', () => modal.open());
116
+ openButton.addEventListener("click", () => modal.open());
115
117
  }
116
118
  if (closeButton && modal) {
117
- closeButton.addEventListener('click', () => modal.close());
119
+ closeButton.addEventListener("click", () => modal.close());
118
120
  }
119
121
  if (cancelButton && modal) {
120
- cancelButton.addEventListener('click', () => modal.close());
122
+ cancelButton.addEventListener("click", () => modal.close());
121
123
  }
122
124
  if (toggleBackButton && modalHeader) {
123
- toggleBackButton.addEventListener('click', () => {
125
+ toggleBackButton.addEventListener("click", () => {
124
126
  modalHeader.back = !modalHeader.back;
125
127
  });
126
128
  }
@@ -137,77 +139,87 @@ export const InvokerCommands = {
137
139
  args: {},
138
140
  render() {
139
141
  return html `
140
- <w-button commandfor="invoker-modal" command="--show-modal" aria-haspopup="dialog">Open a modal</w-button>
141
- <w-modal id="invoker-modal">
142
- <w-modal-header
143
- id="modal-header-one"
144
- slot="header"
145
- title="An example modal"
146
- ></w-modal-header>
147
- <div slot="content">
148
- <h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
149
- <p>
150
- I bomb atomically, Socrates' philosophies and hypotheses Can't
151
- define how I be droppin' these mockeries Lyrically perform armed
152
- robbery Flee with the lottery, possibly they spotted me
153
- Battle-scarred Shogun, explosion when my pen hits tremendous
154
- Ultra-violet shine blind forensics I inspect view through the future
155
- see millennium Killa Beez sold fifty gold, sixty platinum Shackling
156
- the masses with drastic rap tactics Graphic displays melt the steel
157
- like blacksmiths Black Wu jackets, Queen Beez ease the guns in
158
- Rumble with patrolmen, tear gas laced the function Heads by the
159
- score take flight, incite a war Chicks hit the floor, diehard fans
160
- demand more Behold the bold soldier, control the globe slowly
161
- Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
162
- pound footprints in solid rock Wu got it locked, performin' live on
163
- your hottest block
164
- </p>
165
- <p>
166
- First I'm gonna getcha, once I gotcha, I gat-cha, You could never
167
- capture the Method Man's stature. So uhh, tic toc and keep ticking,
168
- while I get you flipping off what I'm kicking. Yes, the rhythm, the
169
- rebel, alone in my level heat it up past the boiling point of metal.
170
- Shackling the masses with drastic rap tactics, graphic displays melt
171
- the steel like blacksmiths. My beats travel like a vortex through
172
- your spine, to the top of your cerebral cortex. Yes, the rhythm, the
173
- rebel, alone in my level heat it up past the boiling point of metal.
174
- Small change, they putting shame in the game. Murderous material,
175
- made by a madman, it's the mic wrecker, Inspector, bad man.
176
- </p>
177
- <p>
178
- My beats travel like a vortex through your spine, to the top of your
179
- cerebral cortex. The rebel, I make more noise than heavy metal. Now,
180
- lo and behold, another deadly episode, bound to catch another charge
181
- when I explode Perpendicular to the square we stay in gold like
182
- Flair, escape from your dragon's lair in particular. Handcuffed in
183
- the back of a bus, forty of us. Slammin a hype verse til ya head
184
- burst. Handcuffed in the back of a bus, forty of us. I bomb
185
- atomically Socrates' philosophies and hypothesis can't define how I
186
- be dropping these mockeries. I be that insane one from the psycho
187
- ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
188
- your section with the Force like Luke Skywalker, rhyme author,
189
- orchestrate mind torture.
190
- </p>
191
- <p>
192
- It was the night before New Year's all through the projects, not a
193
- handgun was silent, not even a Tec. I smoke on the mic like smoking
194
- Joe Frazier, the hell raiser, raising hell with the flavor. The Wu
195
- is comin thru, the outcome is critical, Muckin wit my style, is sort
196
- of like a Miracle. We got stick-up kids, corrupt cops, and pop
197
- rocks. Step through your section with the Force like Luke Skywalker,
198
- rhyme author, orchestrate mind torture. Rae got it going on pal,
199
- call me the rap assassinator, rhymes rugged and built like
200
- Schwarzenegger.
201
- </p>
202
- </div>
203
- <w-modal-footer slot="footer">
204
- <div class="flex gap-16">
205
- <w-button variant="secondary" commandfor="invoker-modal" command="--close">Cancel</w-button>
206
- <w-button variant="primary" id="invoker-confirm">Confirm</w-button>
207
- </div>
208
- </w-modal-footer>
209
- </w-modal>
210
- `;
142
+ <w-button
143
+ commandfor="invoker-modal"
144
+ command="--show-modal"
145
+ aria-haspopup="dialog"
146
+ >Open a modal</w-button
147
+ >
148
+ <w-modal id="invoker-modal">
149
+ <w-modal-header
150
+ id="modal-header-one"
151
+ slot="header"
152
+ title="An example modal"
153
+ ></w-modal-header>
154
+ <div slot="content">
155
+ <h2 class="h4 mb-16">Triumph by Wu Tang Clan</h2>
156
+ <p>
157
+ I bomb atomically, Socrates' philosophies and hypotheses Can't
158
+ define how I be droppin' these mockeries Lyrically perform armed
159
+ robbery Flee with the lottery, possibly they spotted me
160
+ Battle-scarred Shogun, explosion when my pen hits tremendous
161
+ Ultra-violet shine blind forensics I inspect view through the future
162
+ see millennium Killa Beez sold fifty gold, sixty platinum Shackling
163
+ the masses with drastic rap tactics Graphic displays melt the steel
164
+ like blacksmiths Black Wu jackets, Queen Beez ease the guns in
165
+ Rumble with patrolmen, tear gas laced the function Heads by the
166
+ score take flight, incite a war Chicks hit the floor, diehard fans
167
+ demand more Behold the bold soldier, control the globe slowly
168
+ Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
169
+ pound footprints in solid rock Wu got it locked, performin' live on
170
+ your hottest block
171
+ </p>
172
+ <p>
173
+ First I'm gonna getcha, once I gotcha, I gat-cha, You could never
174
+ capture the Method Man's stature. So uhh, tic toc and keep ticking,
175
+ while I get you flipping off what I'm kicking. Yes, the rhythm, the
176
+ rebel, alone in my level heat it up past the boiling point of metal.
177
+ Shackling the masses with drastic rap tactics, graphic displays melt
178
+ the steel like blacksmiths. My beats travel like a vortex through
179
+ your spine, to the top of your cerebral cortex. Yes, the rhythm, the
180
+ rebel, alone in my level heat it up past the boiling point of metal.
181
+ Small change, they putting shame in the game. Murderous material,
182
+ made by a madman, it's the mic wrecker, Inspector, bad man.
183
+ </p>
184
+ <p>
185
+ My beats travel like a vortex through your spine, to the top of your
186
+ cerebral cortex. The rebel, I make more noise than heavy metal. Now,
187
+ lo and behold, another deadly episode, bound to catch another charge
188
+ when I explode Perpendicular to the square we stay in gold like
189
+ Flair, escape from your dragon's lair in particular. Handcuffed in
190
+ the back of a bus, forty of us. Slammin a hype verse til ya head
191
+ burst. Handcuffed in the back of a bus, forty of us. I bomb
192
+ atomically Socrates' philosophies and hypothesis can't define how I
193
+ be dropping these mockeries. I be that insane one from the psycho
194
+ ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
195
+ your section with the Force like Luke Skywalker, rhyme author,
196
+ orchestrate mind torture.
197
+ </p>
198
+ <p>
199
+ It was the night before New Year's all through the projects, not a
200
+ handgun was silent, not even a Tec. I smoke on the mic like smoking
201
+ Joe Frazier, the hell raiser, raising hell with the flavor. The Wu
202
+ is comin thru, the outcome is critical, Muckin wit my style, is sort
203
+ of like a Miracle. We got stick-up kids, corrupt cops, and pop
204
+ rocks. Step through your section with the Force like Luke Skywalker,
205
+ rhyme author, orchestrate mind torture. Rae got it going on pal,
206
+ call me the rap assassinator, rhymes rugged and built like
207
+ Schwarzenegger.
208
+ </p>
209
+ </div>
210
+ <w-modal-footer slot="footer">
211
+ <div class="flex gap-16">
212
+ <w-button
213
+ variant="secondary"
214
+ commandfor="invoker-modal"
215
+ command="--close"
216
+ >Cancel</w-button
217
+ >
218
+ <w-button variant="primary" id="invoker-confirm">Confirm</w-button>
219
+ </div>
220
+ </w-modal-footer>
221
+ </w-modal>
222
+ `;
211
223
  },
212
224
  parameters: {
213
225
  docs: {
@@ -221,57 +233,60 @@ export const WithImage = {
221
233
  args: {},
222
234
  render() {
223
235
  return html `
224
- <w-button id="modal-open-button-two" aria-haspopup="dialog"
225
- >Open a modal</w-button
226
- >
227
- <w-modal id="example-modal-two" style="--w-s-color-icon: var(--w-s-color-icon-inverted)">
228
- <w-modal-header slot="header" title="Look a doggo!">
229
- <img
230
- slot="top"
231
- style="height: 256px; width: 100%; object-fit: cover;"
232
- src="https://images.unsplash.com/photo-1534361960057-19889db9621e"
233
- alt="A really nice dog"
234
- />
235
- </w-modal-header>
236
- <div slot="content">
237
- <p>
238
- I bomb atomically, Socrates' philosophies and hypotheses Can't
239
- define how I be droppin' these mockeries Lyrically perform armed
240
- robbery Flee with the lottery, possibly they spotted me
241
- Battle-scarred Shogun, explosion when my pen hits tremendous
242
- Ultra-violet shine blind forensics I inspect view through the future
243
- see millennium Killa Beez sold fifty gold, sixty platinum Shackling
244
- the masses with drastic rap tactics Graphic displays melt the steel
245
- like blacksmiths Black Wu jackets, Queen Beez ease the guns in
246
- Rumble with patrolmen, tear gas laced the function Heads by the
247
- score take flight, incite a war Chicks hit the floor, diehard fans
248
- demand more Behold the bold soldier, control the globe slowly
249
- Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
250
- pound footprints in solid rock Wu got it locked, performin' live on
251
- your hottest block
252
- </p>
253
- </div>
254
- <w-modal-footer slot="footer">
255
- <w-button variant="primary" id="modal-close-button-two">OK</w-button>
256
- </w-modal-footer>
257
- </w-modal>
258
- `;
236
+ <w-button id="modal-open-button-two" aria-haspopup="dialog"
237
+ >Open a modal</w-button
238
+ >
239
+ <w-modal
240
+ id="example-modal-two"
241
+ style="--w-s-color-icon: var(--w-s-color-icon-inverted)"
242
+ >
243
+ <w-modal-header slot="header" title="Look a doggo!">
244
+ <img
245
+ slot="top"
246
+ style="height: 256px; width: 100%; object-fit: cover;"
247
+ src="https://images.unsplash.com/photo-1534361960057-19889db9621e"
248
+ alt="A really nice dog"
249
+ />
250
+ </w-modal-header>
251
+ <div slot="content">
252
+ <p>
253
+ I bomb atomically, Socrates' philosophies and hypotheses Can't
254
+ define how I be droppin' these mockeries Lyrically perform armed
255
+ robbery Flee with the lottery, possibly they spotted me
256
+ Battle-scarred Shogun, explosion when my pen hits tremendous
257
+ Ultra-violet shine blind forensics I inspect view through the future
258
+ see millennium Killa Beez sold fifty gold, sixty platinum Shackling
259
+ the masses with drastic rap tactics Graphic displays melt the steel
260
+ like blacksmiths Black Wu jackets, Queen Beez ease the guns in
261
+ Rumble with patrolmen, tear gas laced the function Heads by the
262
+ score take flight, incite a war Chicks hit the floor, diehard fans
263
+ demand more Behold the bold soldier, control the globe slowly
264
+ Proceeds to blow, swingin' swords like Shinobi Stomp grounds and
265
+ pound footprints in solid rock Wu got it locked, performin' live on
266
+ your hottest block
267
+ </p>
268
+ </div>
269
+ <w-modal-footer slot="footer">
270
+ <w-button variant="primary" id="modal-close-button-two">OK</w-button>
271
+ </w-modal-footer>
272
+ </w-modal>
273
+ `;
259
274
  },
260
275
  play: async ({ canvasElement }) => {
261
276
  await Promise.all([
262
- customElements.whenDefined('w-button'),
263
- customElements.whenDefined('w-modal'),
264
- customElements.whenDefined('w-modal-header'),
265
- customElements.whenDefined('w-modal-footer'),
277
+ customElements.whenDefined("w-button"),
278
+ customElements.whenDefined("w-modal"),
279
+ customElements.whenDefined("w-modal-header"),
280
+ customElements.whenDefined("w-modal-footer"),
266
281
  ]);
267
- const openButton = canvasElement.querySelector('#modal-open-button-two');
268
- const closeButton = canvasElement.querySelector('#modal-close-button-two');
269
- const modal = canvasElement.querySelector('#example-modal-two');
282
+ const openButton = canvasElement.querySelector("#modal-open-button-two");
283
+ const closeButton = canvasElement.querySelector("#modal-close-button-two");
284
+ const modal = canvasElement.querySelector("#example-modal-two");
270
285
  if (openButton && modal) {
271
- openButton.addEventListener('click', () => modal.open());
286
+ openButton.addEventListener("click", () => modal.open());
272
287
  }
273
288
  if (closeButton && modal) {
274
- closeButton.addEventListener('click', () => modal.close());
289
+ closeButton.addEventListener("click", () => modal.close());
275
290
  }
276
291
  },
277
292
  parameters: {
@@ -285,12 +300,12 @@ export const WithImage = {
285
300
  export const Modal = {
286
301
  render(args) {
287
302
  return html `
288
- <p>
289
- This is here to document attributes. See the Default example for a
290
- complete usage example.
291
- </p>
292
- <w-modal ${spread(prespread(args))}></w-modal>
293
- `;
303
+ <p>
304
+ This is here to document attributes. See the Default example for a
305
+ complete usage example.
306
+ </p>
307
+ <w-modal ${spread(prespread(args))}></w-modal>
308
+ `;
294
309
  },
295
310
  args: modalArgs,
296
311
  argTypes: modalArgTypes,
@@ -303,12 +318,12 @@ export const Modal = {
303
318
  export const ModalHeader = {
304
319
  render(args) {
305
320
  return html `
306
- <p>
307
- This is here to document attributes. See the Default example for a
308
- complete usage example.
309
- </p>
310
- <w-modal-header ${spread(prespread(args))}></w-modal-header>
311
- `;
321
+ <p>
322
+ This is here to document attributes. See the Default example for a
323
+ complete usage example.
324
+ </p>
325
+ <w-modal-header ${spread(prespread(args))}></w-modal-header>
326
+ `;
312
327
  },
313
328
  args: modalHeaderArgs,
314
329
  argTypes: modalHeaderArgTypes,
@@ -321,12 +336,12 @@ export const ModalHeader = {
321
336
  export const ModalFooter = {
322
337
  render(args) {
323
338
  return html `
324
- <p>
325
- This is here to document attributes. See the Default example for a
326
- complete usage example.
327
- </p>
328
- <w-modal-footer ${spread(prespread(args))}></w-modal-footer>
329
- `;
339
+ <p>
340
+ This is here to document attributes. See the Default example for a
341
+ complete usage example.
342
+ </p>
343
+ <w-modal-footer ${spread(prespread(args))}></w-modal-footer>
344
+ `;
330
345
  },
331
346
  args: modalFooterArgs,
332
347
  argTypes: modalFooterArgTypes,
@@ -1,7 +1,7 @@
1
- import React from 'react';
2
- import { WarpModal } from './modal.js';
3
- export { ModalFooter } from '../modal-footer/react.js';
4
- export { ModalHeader } from '../modal-header/react.js';
1
+ import React from "react";
2
+ import { WarpModal } from "./modal.js";
3
+ export { ModalFooter } from "../modal-footer/react.js";
4
+ export { ModalHeader } from "../modal-header/react.js";
5
5
  /**
6
6
  * Modals (or dialogs) display important information that users need to acknowledge.
7
7
  *