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

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 (609) hide show
  1. package/dist/.storybook/utilities.js +4 -4
  2. package/dist/api.js.map +2 -2
  3. package/dist/custom-elements.json +174 -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/breadcrumb-item/api.md +27 -0
  15. package/dist/docs/breadcrumb-item/breadcrumb-item.md +34 -0
  16. package/dist/docs/breadcrumbs/accessibility.md +8 -18
  17. package/dist/docs/breadcrumbs/breadcrumbs.md +57 -34
  18. package/dist/docs/breadcrumbs/examples.md +8 -8
  19. package/dist/docs/breadcrumbs/styling.md +33 -0
  20. package/dist/docs/breadcrumbs/usage.md +8 -8
  21. package/dist/docs/checkbox/api.md +2 -2
  22. package/dist/docs/checkbox/checkbox.md +176 -2
  23. package/dist/docs/checkbox/styling.md +173 -0
  24. package/dist/docs/checkbox-group/checkbox-group.md +43 -30
  25. package/dist/docs/checkbox-group/styling.md +31 -29
  26. package/dist/docs/combobox/api.md +12 -12
  27. package/dist/docs/combobox/combobox.md +12 -12
  28. package/dist/docs/datepicker/api.md +6 -6
  29. package/dist/docs/datepicker/datepicker.md +6 -6
  30. package/dist/docs/icon/api.md +3 -3
  31. package/dist/docs/icon/icon.md +3 -3
  32. package/dist/docs/index.md +2 -1
  33. package/dist/docs/radio-group/api.md +4 -4
  34. package/dist/docs/radio-group/radio-group.md +183 -68
  35. package/dist/docs/radio-group/styling.md +179 -64
  36. package/dist/docs/snackbar/api.md +1 -1
  37. package/dist/docs/snackbar/snackbar.md +1 -1
  38. package/dist/docs/snackbar-item/api.md +2 -2
  39. package/dist/docs/snackbar-item/snackbar-item.md +2 -2
  40. package/dist/index.d.ts +109 -2
  41. package/dist/packages/affix/affix.d.ts +4 -4
  42. package/dist/packages/affix/affix.hydration.test.d.ts +1 -1
  43. package/dist/packages/affix/affix.hydration.test.js +15 -15
  44. package/dist/packages/affix/affix.js +345 -315
  45. package/dist/packages/affix/affix.js.map +2 -2
  46. package/dist/packages/affix/affix.react.stories.d.ts +2 -2
  47. package/dist/packages/affix/affix.react.stories.js +3 -3
  48. package/dist/packages/affix/affix.react.test.js +5 -3
  49. package/dist/packages/affix/affix.stories.d.ts +3 -3
  50. package/dist/packages/affix/affix.stories.js +10 -10
  51. package/dist/packages/affix/affix.test.d.ts +1 -1
  52. package/dist/packages/affix/affix.test.js +10 -10
  53. package/dist/packages/affix/react.d.ts +2 -2
  54. package/dist/packages/affix/react.js +6 -6
  55. package/dist/packages/affix/styles.js +1 -1
  56. package/dist/packages/alert/alert.d.ts +3 -3
  57. package/dist/packages/alert/alert.hydration.test.d.ts +1 -1
  58. package/dist/packages/alert/alert.hydration.test.js +21 -21
  59. package/dist/packages/alert/alert.js +344 -319
  60. package/dist/packages/alert/alert.js.map +2 -2
  61. package/dist/packages/alert/alert.react.stories.d.ts +2 -2
  62. package/dist/packages/alert/alert.react.stories.js +13 -13
  63. package/dist/packages/alert/alert.stories.d.ts +4 -4
  64. package/dist/packages/alert/alert.stories.js +29 -27
  65. package/dist/packages/alert/alert.test.d.ts +1 -1
  66. package/dist/packages/alert/alert.test.js +34 -21
  67. package/dist/packages/alert/react.d.ts +1 -1
  68. package/dist/packages/alert/react.js +4 -4
  69. package/dist/packages/alert/styles.js +1 -1
  70. package/dist/packages/attention/attention.d.ts +7 -7
  71. package/dist/packages/attention/attention.hydration.test.d.ts +1 -1
  72. package/dist/packages/attention/attention.hydration.test.js +29 -29
  73. package/dist/packages/attention/attention.js +1725 -1683
  74. package/dist/packages/attention/attention.js.map +2 -2
  75. package/dist/packages/attention/attention.react.stories.d.ts +3 -3
  76. package/dist/packages/attention/attention.react.stories.js +13 -13
  77. package/dist/packages/attention/attention.react.test.js +11 -7
  78. package/dist/packages/attention/attention.stories.d.ts +4 -4
  79. package/dist/packages/attention/attention.stories.js +126 -117
  80. package/dist/packages/attention/attention.test.d.ts +1 -1
  81. package/dist/packages/attention/attention.test.js +18 -10
  82. package/dist/packages/attention/layout-styles.js +900 -900
  83. package/dist/packages/attention/react.d.ts +4 -4
  84. package/dist/packages/attention/react.js +13 -11
  85. package/dist/packages/attention/styles.js +1 -1
  86. package/dist/packages/badge/badge.d.ts +3 -3
  87. package/dist/packages/badge/badge.hydration.test.d.ts +1 -1
  88. package/dist/packages/badge/badge.hydration.test.js +25 -25
  89. package/dist/packages/badge/badge.js +276 -276
  90. package/dist/packages/badge/badge.js.map +2 -2
  91. package/dist/packages/badge/badge.react.stories.d.ts +3 -3
  92. package/dist/packages/badge/badge.react.stories.js +17 -17
  93. package/dist/packages/badge/badge.stories.d.ts +3 -3
  94. package/dist/packages/badge/badge.stories.js +22 -20
  95. package/dist/packages/badge/badge.test.d.ts +1 -1
  96. package/dist/packages/badge/badge.test.js +13 -11
  97. package/dist/packages/badge/react.d.ts +1 -1
  98. package/dist/packages/badge/react.js +4 -4
  99. package/dist/packages/badge/styles.js +1 -1
  100. package/dist/packages/box/box.d.ts +1 -1
  101. package/dist/packages/box/box.hydration.test.d.ts +1 -1
  102. package/dist/packages/box/box.hydration.test.js +14 -14
  103. package/dist/packages/box/box.js +283 -283
  104. package/dist/packages/box/box.js.map +2 -2
  105. package/dist/packages/box/box.react.stories.d.ts +3 -3
  106. package/dist/packages/box/box.react.stories.js +8 -8
  107. package/dist/packages/box/box.stories.d.ts +3 -3
  108. package/dist/packages/box/box.stories.js +25 -19
  109. package/dist/packages/box/box.test.d.ts +1 -1
  110. package/dist/packages/box/box.test.js +6 -6
  111. package/dist/packages/box/react.d.ts +1 -1
  112. package/dist/packages/box/react.js +4 -4
  113. package/dist/packages/box/slot.test.d.ts +1 -1
  114. package/dist/packages/box/slot.test.js +6 -6
  115. package/dist/packages/box/styles.js +1 -1
  116. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +29 -0
  117. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2520 -0
  118. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +7 -0
  119. package/dist/packages/breadcrumb-item/react.d.ts +2 -0
  120. package/dist/packages/breadcrumb-item/react.js +11 -0
  121. package/dist/packages/breadcrumb-item/styles.d.ts +4 -0
  122. package/dist/packages/breadcrumb-item/styles.js +72 -0
  123. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +3 -1
  124. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.d.ts +1 -1
  125. package/dist/packages/breadcrumbs/breadcrumbs.hydration.test.js +55 -49
  126. package/dist/packages/breadcrumbs/breadcrumbs.js +285 -281
  127. package/dist/packages/breadcrumbs/breadcrumbs.js.map +3 -3
  128. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +3 -3
  129. package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +17 -16
  130. package/dist/packages/breadcrumbs/breadcrumbs.stories.d.ts +7 -8
  131. package/dist/packages/breadcrumbs/breadcrumbs.stories.js +30 -26
  132. package/dist/packages/breadcrumbs/breadcrumbs.test.d.ts +1 -1
  133. package/dist/packages/breadcrumbs/breadcrumbs.test.js +19 -17
  134. package/dist/packages/breadcrumbs/react.d.ts +1 -1
  135. package/dist/packages/breadcrumbs/react.js +4 -4
  136. package/dist/packages/breadcrumbs/styles.js +1 -1
  137. package/dist/packages/button/button.d.ts +5 -5
  138. package/dist/packages/button/button.hydration.test.d.ts +1 -1
  139. package/dist/packages/button/button.hydration.test.js +19 -19
  140. package/dist/packages/button/button.js +741 -715
  141. package/dist/packages/button/button.js.map +2 -2
  142. package/dist/packages/button/button.react.stories.d.ts +3 -3
  143. package/dist/packages/button/button.react.stories.js +30 -30
  144. package/dist/packages/button/button.react.test.js +13 -13
  145. package/dist/packages/button/button.stories.d.ts +4 -4
  146. package/dist/packages/button/button.stories.js +276 -167
  147. package/dist/packages/button/button.test.d.ts +1 -1
  148. package/dist/packages/button/button.test.js +36 -34
  149. package/dist/packages/button/react.d.ts +2 -2
  150. package/dist/packages/button/react.js +7 -7
  151. package/dist/packages/button/styles.js +373 -347
  152. package/dist/packages/card/card.d.ts +1 -1
  153. package/dist/packages/card/card.hydration.test.d.ts +1 -1
  154. package/dist/packages/card/card.hydration.test.js +14 -14
  155. package/dist/packages/card/card.js +305 -290
  156. package/dist/packages/card/card.js.map +2 -2
  157. package/dist/packages/card/card.react.stories.d.ts +3 -3
  158. package/dist/packages/card/card.react.stories.js +11 -11
  159. package/dist/packages/card/card.stories.d.ts +3 -3
  160. package/dist/packages/card/card.stories.js +36 -24
  161. package/dist/packages/card/card.test.d.ts +1 -1
  162. package/dist/packages/card/card.test.js +6 -6
  163. package/dist/packages/card/react.d.ts +1 -1
  164. package/dist/packages/card/react.js +4 -4
  165. package/dist/packages/card/styles.js +1 -1
  166. package/dist/packages/checkbox/checkbox.a11y.test.d.ts +1 -1
  167. package/dist/packages/checkbox/checkbox.a11y.test.js +47 -33
  168. package/dist/packages/checkbox/checkbox.d.ts +2 -2
  169. package/dist/packages/checkbox/checkbox.hydration.test.d.ts +1 -1
  170. package/dist/packages/checkbox/checkbox.hydration.test.js +21 -21
  171. package/dist/packages/checkbox/checkbox.js +475 -424
  172. package/dist/packages/checkbox/checkbox.js.map +2 -2
  173. package/dist/packages/checkbox/checkbox.react.stories.d.ts +2 -2
  174. package/dist/packages/checkbox/checkbox.react.stories.js +3 -3
  175. package/dist/packages/checkbox/checkbox.stories.d.ts +4 -4
  176. package/dist/packages/checkbox/checkbox.stories.js +99 -91
  177. package/dist/packages/checkbox/checkbox.test.d.ts +1 -1
  178. package/dist/packages/checkbox/checkbox.test.js +64 -64
  179. package/dist/packages/checkbox/react.d.ts +1 -1
  180. package/dist/packages/checkbox/react.js +6 -6
  181. package/dist/packages/checkbox/styles.js +183 -132
  182. package/dist/packages/checkbox-group/checkbox-group.a11y.test.d.ts +2 -2
  183. package/dist/packages/checkbox-group/checkbox-group.a11y.test.js +83 -73
  184. package/dist/packages/checkbox-group/checkbox-group.d.ts +16 -2
  185. package/dist/packages/checkbox-group/checkbox-group.hydration.test.d.ts +2 -2
  186. package/dist/packages/checkbox-group/checkbox-group.hydration.test.js +36 -19
  187. package/dist/packages/checkbox-group/checkbox-group.js +60 -55
  188. package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
  189. package/dist/packages/checkbox-group/checkbox-group.react.test.js +4 -4
  190. package/dist/packages/checkbox-group/checkbox-group.test.d.ts +2 -2
  191. package/dist/packages/checkbox-group/checkbox-group.test.js +96 -90
  192. package/dist/packages/checkbox-group/react.d.ts +2 -2
  193. package/dist/packages/checkbox-group/react.js +6 -6
  194. package/dist/packages/combobox/combobox.a11y.test.d.ts +2 -2
  195. package/dist/packages/combobox/combobox.a11y.test.js +72 -49
  196. package/dist/packages/combobox/combobox.d.ts +2 -2
  197. package/dist/packages/combobox/combobox.hydration.test.d.ts +1 -1
  198. package/dist/packages/combobox/combobox.hydration.test.js +45 -45
  199. package/dist/packages/combobox/combobox.js +332 -332
  200. package/dist/packages/combobox/combobox.js.map +3 -3
  201. package/dist/packages/combobox/combobox.react.stories.d.ts +3 -3
  202. package/dist/packages/combobox/combobox.react.stories.js +29 -29
  203. package/dist/packages/combobox/combobox.react.test.js +8 -8
  204. package/dist/packages/combobox/combobox.stories.d.ts +4 -4
  205. package/dist/packages/combobox/combobox.stories.js +100 -94
  206. package/dist/packages/combobox/combobox.test.d.ts +2 -2
  207. package/dist/packages/combobox/combobox.test.js +148 -133
  208. package/dist/packages/combobox/react.d.ts +2 -2
  209. package/dist/packages/combobox/react.js +14 -14
  210. package/dist/packages/combobox/styles.js +1 -1
  211. package/dist/packages/datepicker/DatePicker.test.d.ts +2 -2
  212. package/dist/packages/datepicker/DatePicker.test.js +46 -41
  213. package/dist/packages/datepicker/datepicker.d.ts +3 -3
  214. package/dist/packages/datepicker/datepicker.hydration.test.d.ts +1 -1
  215. package/dist/packages/datepicker/datepicker.hydration.test.js +21 -21
  216. package/dist/packages/datepicker/datepicker.js +665 -625
  217. package/dist/packages/datepicker/datepicker.js.map +3 -3
  218. package/dist/packages/datepicker/datepicker.react.stories.d.ts +3 -3
  219. package/dist/packages/datepicker/datepicker.react.stories.js +9 -9
  220. package/dist/packages/datepicker/datepicker.react.test.js +6 -6
  221. package/dist/packages/datepicker/datepicker.stories.d.ts +4 -4
  222. package/dist/packages/datepicker/datepicker.stories.js +32 -32
  223. package/dist/packages/datepicker/datepicker.test.d.ts +2 -2
  224. package/dist/packages/datepicker/datepicker.test.js +77 -79
  225. package/dist/packages/datepicker/react.d.ts +2 -2
  226. package/dist/packages/datepicker/react.js +16 -14
  227. package/dist/packages/datepicker/styles/w-datepicker-calendar.styles.js +13 -12
  228. package/dist/packages/datepicker/styles/w-datepicker-day.styles.js +58 -55
  229. package/dist/packages/datepicker/styles/w-datepicker-month.styles.js +60 -57
  230. package/dist/packages/datepicker/styles/w-datepicker.styles.js +87 -87
  231. package/dist/packages/datepicker/utils.d.ts +1 -1
  232. package/dist/packages/datepicker/utils.js +25 -19
  233. package/dist/packages/datepicker/utils.test.js +20 -20
  234. package/dist/packages/expandable/expandable.d.ts +4 -4
  235. package/dist/packages/expandable/expandable.hydration.test.d.ts +1 -1
  236. package/dist/packages/expandable/expandable.hydration.test.js +21 -21
  237. package/dist/packages/expandable/expandable.js +353 -326
  238. package/dist/packages/expandable/expandable.js.map +2 -2
  239. package/dist/packages/expandable/expandable.react.stories.d.ts +3 -3
  240. package/dist/packages/expandable/expandable.react.stories.js +7 -7
  241. package/dist/packages/expandable/expandable.react.test.js +15 -7
  242. package/dist/packages/expandable/expandable.stories.d.ts +5 -5
  243. package/dist/packages/expandable/expandable.stories.js +51 -45
  244. package/dist/packages/expandable/expandable.test.d.ts +1 -1
  245. package/dist/packages/expandable/expandable.test.js +19 -17
  246. package/dist/packages/expandable/react.d.ts +2 -2
  247. package/dist/packages/expandable/react.js +9 -9
  248. package/dist/packages/expandable/styles.js +1 -1
  249. package/dist/packages/global.js +2 -2
  250. package/dist/packages/i18n.d.ts +1 -1
  251. package/dist/packages/i18n.js +37 -29
  252. package/dist/packages/icon/icon.d.ts +3 -3
  253. package/dist/packages/icon/icon.hydration.test.d.ts +1 -1
  254. package/dist/packages/icon/icon.hydration.test.js +25 -25
  255. package/dist/packages/icon/icon.js +30 -25
  256. package/dist/packages/icon/icon.js.map +2 -2
  257. package/dist/packages/icon/icon.react.stories.d.ts +1 -1
  258. package/dist/packages/icon/icon.react.stories.js +283 -284
  259. package/dist/packages/icon/icon.stories.d.ts +3 -3
  260. package/dist/packages/icon/icon.stories.js +299 -298
  261. package/dist/packages/icon/icon.test.d.ts +1 -1
  262. package/dist/packages/icon/icon.test.js +36 -28
  263. package/dist/packages/icon/react.d.ts +1 -1
  264. package/dist/packages/icon/react.js +4 -4
  265. package/dist/packages/icon/style.js +24 -25
  266. package/dist/packages/interaction-type-detection.js +9 -9
  267. package/dist/packages/link/link.d.ts +2 -2
  268. package/dist/packages/link/link.hydration.test.d.ts +1 -1
  269. package/dist/packages/link/link.hydration.test.js +27 -27
  270. package/dist/packages/link/link.js +709 -683
  271. package/dist/packages/link/link.js.map +2 -2
  272. package/dist/packages/link/link.react.stories.d.ts +3 -3
  273. package/dist/packages/link/link.react.stories.js +42 -42
  274. package/dist/packages/link/link.react.test.js +5 -3
  275. package/dist/packages/link/link.stories.d.ts +3 -3
  276. package/dist/packages/link/link.stories.js +51 -51
  277. package/dist/packages/link/link.test.d.ts +1 -1
  278. package/dist/packages/link/link.test.js +11 -7
  279. package/dist/packages/link/react.d.ts +2 -2
  280. package/dist/packages/link/react.js +6 -6
  281. package/dist/packages/link/styles.js +57 -57
  282. package/dist/packages/modal/index.d.ts +7 -7
  283. package/dist/packages/modal/index.js +7 -7
  284. package/dist/packages/modal/modal.d.ts +1 -1
  285. package/dist/packages/modal/modal.hydration.test.d.ts +1 -1
  286. package/dist/packages/modal/modal.hydration.test.js +12 -12
  287. package/dist/packages/modal/modal.js +404 -404
  288. package/dist/packages/modal/modal.js.map +2 -2
  289. package/dist/packages/modal/modal.react.stories.d.ts +3 -3
  290. package/dist/packages/modal/modal.react.stories.js +7 -6
  291. package/dist/packages/modal/modal.react.test.js +5 -5
  292. package/dist/packages/modal/modal.stories.d.ts +6 -6
  293. package/dist/packages/modal/modal.stories.js +253 -238
  294. package/dist/packages/modal/react.d.ts +4 -4
  295. package/dist/packages/modal/react.js +13 -13
  296. package/dist/packages/modal/util.js +2 -2
  297. package/dist/packages/modal-footer/modal-footer.d.ts +1 -1
  298. package/dist/packages/modal-footer/modal-footer.js +291 -291
  299. package/dist/packages/modal-footer/modal-footer.js.map +2 -2
  300. package/dist/packages/modal-footer/react.d.ts +1 -1
  301. package/dist/packages/modal-footer/react.js +4 -4
  302. package/dist/packages/modal-header/modal-header.d.ts +2 -2
  303. package/dist/packages/modal-header/modal-header.js +437 -416
  304. package/dist/packages/modal-header/modal-header.js.map +2 -2
  305. package/dist/packages/modal-header/modal-header.react.test.js +5 -3
  306. package/dist/packages/modal-header/react.d.ts +2 -2
  307. package/dist/packages/modal-header/react.js +8 -8
  308. package/dist/packages/page-indicator/page-indicator.d.ts +1 -1
  309. package/dist/packages/page-indicator/page-indicator.hydration.test.d.ts +1 -1
  310. package/dist/packages/page-indicator/page-indicator.hydration.test.js +22 -22
  311. package/dist/packages/page-indicator/page-indicator.js +26 -26
  312. package/dist/packages/page-indicator/page-indicator.js.map +2 -2
  313. package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +3 -3
  314. package/dist/packages/page-indicator/page-indicator.react.stories.js +11 -11
  315. package/dist/packages/page-indicator/page-indicator.react.test.js +5 -5
  316. package/dist/packages/page-indicator/page-indicator.stories.d.ts +3 -3
  317. package/dist/packages/page-indicator/page-indicator.stories.js +56 -27
  318. package/dist/packages/page-indicator/page-indicator.test.d.ts +1 -1
  319. package/dist/packages/page-indicator/page-indicator.test.js +110 -70
  320. package/dist/packages/page-indicator/react.d.ts +2 -2
  321. package/dist/packages/page-indicator/react.js +7 -7
  322. package/dist/packages/page-indicator/style.js +21 -21
  323. package/dist/packages/pagination/pagination.a11y.test.d.ts +1 -1
  324. package/dist/packages/pagination/pagination.a11y.test.js +59 -25
  325. package/dist/packages/pagination/pagination.d.ts +3 -3
  326. package/dist/packages/pagination/pagination.hydration.test.d.ts +1 -1
  327. package/dist/packages/pagination/pagination.hydration.test.js +19 -19
  328. package/dist/packages/pagination/pagination.js +380 -349
  329. package/dist/packages/pagination/pagination.js.map +2 -2
  330. package/dist/packages/pagination/pagination.react.stories.d.ts +7 -7
  331. package/dist/packages/pagination/pagination.react.stories.js +8 -8
  332. package/dist/packages/pagination/pagination.react.test.js +6 -6
  333. package/dist/packages/pagination/pagination.stories.d.ts +3 -3
  334. package/dist/packages/pagination/pagination.stories.js +18 -18
  335. package/dist/packages/pagination/pagination.test.d.ts +1 -1
  336. package/dist/packages/pagination/pagination.test.js +146 -69
  337. package/dist/packages/pagination/react.d.ts +4 -4
  338. package/dist/packages/pagination/react.js +12 -10
  339. package/dist/packages/pagination/styles.js +1 -1
  340. package/dist/packages/pill/pill.d.ts +2 -2
  341. package/dist/packages/pill/pill.hydration.test.d.ts +1 -1
  342. package/dist/packages/pill/pill.hydration.test.js +14 -14
  343. package/dist/packages/pill/pill.js +331 -308
  344. package/dist/packages/pill/pill.js.map +2 -2
  345. package/dist/packages/pill/pill.react.stories.d.ts +3 -3
  346. package/dist/packages/pill/pill.react.stories.js +3 -3
  347. package/dist/packages/pill/pill.react.test.js +8 -8
  348. package/dist/packages/pill/pill.stories.d.ts +3 -3
  349. package/dist/packages/pill/pill.stories.js +8 -8
  350. package/dist/packages/pill/pill.test.d.ts +1 -1
  351. package/dist/packages/pill/pill.test.js +17 -15
  352. package/dist/packages/pill/react.d.ts +2 -2
  353. package/dist/packages/pill/react.js +18 -14
  354. package/dist/packages/pill/styles.js +1 -1
  355. package/dist/packages/radio/base-element.d.ts +3 -3
  356. package/dist/packages/radio/base-element.js +3 -3
  357. package/dist/packages/radio/custom-error-validator.d.ts +1 -1
  358. package/dist/packages/radio/custom-error-validator.js +3 -3
  359. package/dist/packages/radio/form-associated-element.d.ts +8 -8
  360. package/dist/packages/radio/form-associated-element.js +27 -26
  361. package/dist/packages/radio/host-styles.js +9 -9
  362. package/dist/packages/radio/invalid.d.ts +1 -1
  363. package/dist/packages/radio/invalid.js +1 -1
  364. package/dist/packages/radio/radio-styles.js +199 -160
  365. package/dist/packages/radio/radio.a11y.test.d.ts +2 -2
  366. package/dist/packages/radio/radio.a11y.test.js +60 -58
  367. package/dist/packages/radio/radio.d.ts +3 -3
  368. package/dist/packages/radio/radio.hydration.test.d.ts +1 -1
  369. package/dist/packages/radio/radio.hydration.test.js +23 -14
  370. package/dist/packages/radio/radio.js +485 -446
  371. package/dist/packages/radio/radio.js.map +3 -3
  372. package/dist/packages/radio/radio.react.stories.d.ts +2 -2
  373. package/dist/packages/radio/radio.react.stories.js +3 -3
  374. package/dist/packages/radio/radio.stories.d.ts +4 -4
  375. package/dist/packages/radio/radio.stories.js +152 -136
  376. package/dist/packages/radio/radio.test.d.ts +1 -1
  377. package/dist/packages/radio/radio.test.js +74 -73
  378. package/dist/packages/radio/react.d.ts +1 -1
  379. package/dist/packages/radio/react.js +4 -4
  380. package/dist/packages/radio/required-validator.d.ts +1 -1
  381. package/dist/packages/radio/required-validator.js +12 -7
  382. package/dist/packages/radio/slot.d.ts +1 -1
  383. package/dist/packages/radio/slot.js +11 -8
  384. package/dist/packages/radio/watch.d.ts +1 -1
  385. package/dist/packages/radio/watch.js +3 -1
  386. package/dist/packages/radio-group/radio-group-styles.js +121 -88
  387. package/dist/packages/radio-group/radio-group.a11y.test.d.ts +2 -2
  388. package/dist/packages/radio-group/radio-group.a11y.test.js +81 -79
  389. package/dist/packages/radio-group/radio-group.d.ts +14 -5
  390. package/dist/packages/radio-group/radio-group.hydration.test.d.ts +2 -2
  391. package/dist/packages/radio-group/radio-group.hydration.test.js +29 -18
  392. package/dist/packages/radio-group/radio-group.js +648 -560
  393. package/dist/packages/radio-group/radio-group.js.map +3 -3
  394. package/dist/packages/radio-group/radio-group.react.test.js +4 -4
  395. package/dist/packages/radio-group/radio-group.test.d.ts +2 -2
  396. package/dist/packages/radio-group/radio-group.test.js +234 -229
  397. package/dist/packages/radio-group/react.d.ts +2 -2
  398. package/dist/packages/radio-group/react.js +10 -10
  399. package/dist/packages/select/react.d.ts +2 -2
  400. package/dist/packages/select/react.js +11 -11
  401. package/dist/packages/select/select.a11y.test.d.ts +1 -1
  402. package/dist/packages/select/select.a11y.test.js +98 -91
  403. package/dist/packages/select/select.d.ts +4 -4
  404. package/dist/packages/select/select.hydration.test.d.ts +1 -1
  405. package/dist/packages/select/select.hydration.test.js +16 -16
  406. package/dist/packages/select/select.js +348 -329
  407. package/dist/packages/select/select.js.map +2 -2
  408. package/dist/packages/select/select.react.stories.d.ts +3 -3
  409. package/dist/packages/select/select.react.stories.js +7 -7
  410. package/dist/packages/select/select.react.test.js +6 -6
  411. package/dist/packages/select/select.stories.d.ts +3 -3
  412. package/dist/packages/select/select.stories.js +51 -48
  413. package/dist/packages/select/select.test.d.ts +1 -1
  414. package/dist/packages/select/select.test.js +175 -178
  415. package/dist/packages/select/styles.js +1 -1
  416. package/dist/packages/slider/Slider.d.ts +1 -1
  417. package/dist/packages/slider/Slider.js +4 -4
  418. package/dist/packages/slider/index.d.ts +2 -2
  419. package/dist/packages/slider/index.js +2 -2
  420. package/dist/packages/slider/react.d.ts +3 -3
  421. package/dist/packages/slider/react.js +9 -9
  422. package/dist/packages/slider/slider.d.ts +3 -3
  423. package/dist/packages/slider/slider.hydration.test.d.ts +1 -1
  424. package/dist/packages/slider/slider.hydration.test.js +39 -20
  425. package/dist/packages/slider/slider.js +480 -462
  426. package/dist/packages/slider/slider.js.map +2 -2
  427. package/dist/packages/slider/slider.react.stories.d.ts +3 -3
  428. package/dist/packages/slider/slider.react.stories.js +31 -34
  429. package/dist/packages/slider/slider.react.test.js +6 -6
  430. package/dist/packages/slider/slider.stories.d.ts +7 -7
  431. package/dist/packages/slider/slider.stories.js +332 -340
  432. package/dist/packages/slider/slider.test.d.ts +5 -5
  433. package/dist/packages/slider/slider.test.js +367 -334
  434. package/dist/packages/slider/styles/w-slider.styles.js +166 -148
  435. package/dist/packages/slider/styles.js +1 -1
  436. package/dist/packages/slider-thumb/SliderThumb.d.ts +1 -1
  437. package/dist/packages/slider-thumb/SliderThumb.js +4 -4
  438. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.d.ts +1 -1
  439. package/dist/packages/slider-thumb/oddbird-css-anchor-positioning.js +1 -1
  440. package/dist/packages/slider-thumb/react.d.ts +3 -3
  441. package/dist/packages/slider-thumb/react.js +11 -9
  442. package/dist/packages/slider-thumb/slider-thumb.d.ts +3 -3
  443. package/dist/packages/slider-thumb/slider-thumb.hydration.test.d.ts +1 -1
  444. package/dist/packages/slider-thumb/slider-thumb.hydration.test.js +26 -17
  445. package/dist/packages/slider-thumb/slider-thumb.js +545 -548
  446. package/dist/packages/slider-thumb/slider-thumb.js.map +3 -3
  447. package/dist/packages/slider-thumb/slider-thumb.react.test.js +9 -5
  448. package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js +189 -188
  449. package/dist/packages/slider-thumb/styles.js +1 -1
  450. package/dist/packages/snackbar/react.d.ts +1 -1
  451. package/dist/packages/snackbar/react.js +4 -4
  452. package/dist/packages/snackbar/snackbar.d.ts +3 -3
  453. package/dist/packages/snackbar/snackbar.hydration.test.d.ts +1 -1
  454. package/dist/packages/snackbar/snackbar.hydration.test.js +6 -6
  455. package/dist/packages/snackbar/snackbar.js +487 -468
  456. package/dist/packages/snackbar/snackbar.js.map +2 -2
  457. package/dist/packages/snackbar/snackbar.react.stories.js +3 -3
  458. package/dist/packages/snackbar/snackbar.stories.d.ts +11 -11
  459. package/dist/packages/snackbar/snackbar.stories.js +253 -181
  460. package/dist/packages/snackbar/snackbar.test.d.ts +4 -4
  461. package/dist/packages/snackbar/snackbar.test.js +11 -11
  462. package/dist/packages/snackbar/styles.js +29 -29
  463. package/dist/packages/snackbar-item/react.d.ts +2 -2
  464. package/dist/packages/snackbar-item/react.js +6 -5
  465. package/dist/packages/snackbar-item/snackbar-item.d.ts +4 -4
  466. package/dist/packages/snackbar-item/snackbar-item.js +454 -435
  467. package/dist/packages/snackbar-item/snackbar-item.js.map +2 -2
  468. package/dist/packages/snackbar-item/snackbar-item.react.test.js +4 -4
  469. package/dist/packages/snackbar-item/styles.js +130 -108
  470. package/dist/packages/step/react.d.ts +1 -1
  471. package/dist/packages/step/react.js +4 -4
  472. package/dist/packages/step/step.d.ts +2 -2
  473. package/dist/packages/step/step.hydration.test.d.ts +1 -1
  474. package/dist/packages/step/step.hydration.test.js +10 -10
  475. package/dist/packages/step/step.js +330 -308
  476. package/dist/packages/step/step.js.map +2 -2
  477. package/dist/packages/step-indicator/index.d.ts +2 -2
  478. package/dist/packages/step-indicator/index.js +2 -2
  479. package/dist/packages/step-indicator/react.d.ts +2 -2
  480. package/dist/packages/step-indicator/react.js +5 -5
  481. package/dist/packages/step-indicator/step-indicator.a11y.test.d.ts +2 -2
  482. package/dist/packages/step-indicator/step-indicator.a11y.test.js +48 -46
  483. package/dist/packages/step-indicator/step-indicator.d.ts +1 -1
  484. package/dist/packages/step-indicator/step-indicator.hydration.test.d.ts +1 -1
  485. package/dist/packages/step-indicator/step-indicator.hydration.test.js +10 -10
  486. package/dist/packages/step-indicator/step-indicator.js +280 -276
  487. package/dist/packages/step-indicator/step-indicator.js.map +2 -2
  488. package/dist/packages/step-indicator/stepindicator.react.stories.d.ts +2 -2
  489. package/dist/packages/step-indicator/stepindicator.react.stories.js +3 -3
  490. package/dist/packages/step-indicator/stepindicator.stories.d.ts +3 -3
  491. package/dist/packages/step-indicator/stepindicator.stories.js +129 -129
  492. package/dist/packages/step-indicator/styles.js +1 -1
  493. package/dist/packages/styles.js +274 -274
  494. package/dist/packages/switch/react.d.ts +1 -1
  495. package/dist/packages/switch/react.js +6 -6
  496. package/dist/packages/switch/styles.js +1 -1
  497. package/dist/packages/switch/switch.a11y.test.d.ts +1 -1
  498. package/dist/packages/switch/switch.a11y.test.js +46 -38
  499. package/dist/packages/switch/switch.d.ts +1 -1
  500. package/dist/packages/switch/switch.hydration.test.d.ts +1 -1
  501. package/dist/packages/switch/switch.hydration.test.js +23 -23
  502. package/dist/packages/switch/switch.js +299 -299
  503. package/dist/packages/switch/switch.js.map +2 -2
  504. package/dist/packages/switch/switch.react.stories.d.ts +2 -2
  505. package/dist/packages/switch/switch.react.stories.js +2 -2
  506. package/dist/packages/switch/switch.stories.d.ts +2 -2
  507. package/dist/packages/switch/switch.stories.js +42 -37
  508. package/dist/packages/switch/switch.test.d.ts +1 -1
  509. package/dist/packages/switch/switch.test.js +30 -35
  510. package/dist/packages/tab/react.d.ts +6 -4
  511. package/dist/packages/tab/react.js +11 -10
  512. package/dist/packages/tab/styles.d.ts +1 -0
  513. package/dist/packages/tab/styles.js +2 -0
  514. package/dist/packages/tab/tab.d.ts +5 -5
  515. package/dist/packages/tab/tab.hydration.test.d.ts +1 -1
  516. package/dist/packages/tab/tab.hydration.test.js +18 -12
  517. package/dist/packages/tab/tab.js +305 -304
  518. package/dist/packages/tab/tab.js.map +3 -3
  519. package/dist/packages/tab/tab.react.test.js +5 -3
  520. package/dist/packages/tab-panel/react.d.ts +3 -2
  521. package/dist/packages/tab-panel/react.js +11 -5
  522. package/dist/packages/tab-panel/tab-panel.d.ts +3 -3
  523. package/dist/packages/tab-panel/tab-panel.hydration.test.d.ts +1 -1
  524. package/dist/packages/tab-panel/tab-panel.hydration.test.js +13 -10
  525. package/dist/packages/tab-panel/tab-panel.js +289 -287
  526. package/dist/packages/tab-panel/tab-panel.js.map +2 -2
  527. package/dist/packages/tabs/index.d.ts +4 -4
  528. package/dist/packages/tabs/index.js +3 -3
  529. package/dist/packages/tabs/react.d.ts +27 -8
  530. package/dist/packages/tabs/react.js +30 -9
  531. package/dist/packages/tabs/styles.js +1 -1
  532. package/dist/packages/tabs/tabs.a11y.test.d.ts +3 -3
  533. package/dist/packages/tabs/tabs.a11y.test.js +188 -169
  534. package/dist/packages/tabs/tabs.d.ts +3 -3
  535. package/dist/packages/tabs/tabs.hydration.test.d.ts +3 -1
  536. package/dist/packages/tabs/tabs.hydration.test.js +22 -8
  537. package/dist/packages/tabs/tabs.js +289 -282
  538. package/dist/packages/tabs/tabs.js.map +2 -2
  539. package/dist/packages/tabs/tabs.react.stories.d.ts +12 -10
  540. package/dist/packages/tabs/tabs.react.stories.js +28 -28
  541. package/dist/packages/tabs/tabs.stories.d.ts +4 -4
  542. package/dist/packages/tabs/tabs.stories.js +101 -95
  543. package/dist/packages/tabs/tabs.test.d.ts +3 -3
  544. package/dist/packages/tabs/tabs.test.js +136 -122
  545. package/dist/packages/textarea/react.d.ts +2 -2
  546. package/dist/packages/textarea/react.js +17 -17
  547. package/dist/packages/textarea/styles.js +1 -1
  548. package/dist/packages/textarea/textarea.a11y.test.d.ts +1 -1
  549. package/dist/packages/textarea/textarea.a11y.test.js +89 -57
  550. package/dist/packages/textarea/textarea.d.ts +1 -1
  551. package/dist/packages/textarea/textarea.hydration.test.d.ts +1 -1
  552. package/dist/packages/textarea/textarea.hydration.test.js +19 -19
  553. package/dist/packages/textarea/textarea.js +300 -298
  554. package/dist/packages/textarea/textarea.js.map +2 -2
  555. package/dist/packages/textarea/textarea.react.stories.d.ts +3 -3
  556. package/dist/packages/textarea/textarea.react.stories.js +13 -13
  557. package/dist/packages/textarea/textarea.react.test.js +7 -7
  558. package/dist/packages/textarea/textarea.stories.d.ts +3 -3
  559. package/dist/packages/textarea/textarea.stories.js +44 -42
  560. package/dist/packages/textarea/textarea.test.d.ts +1 -1
  561. package/dist/packages/textarea/textarea.test.js +124 -88
  562. package/dist/packages/textfield/react.d.ts +2 -2
  563. package/dist/packages/textfield/react.js +17 -17
  564. package/dist/packages/textfield/styles/w-textfield.styles.js +60 -58
  565. package/dist/packages/textfield/styles.js +1 -1
  566. package/dist/packages/textfield/textfield.d.ts +3 -3
  567. package/dist/packages/textfield/textfield.hydration.test.d.ts +1 -1
  568. package/dist/packages/textfield/textfield.hydration.test.js +19 -19
  569. package/dist/packages/textfield/textfield.js +376 -368
  570. package/dist/packages/textfield/textfield.js.map +3 -3
  571. package/dist/packages/textfield/textfield.react.stories.d.ts +3 -3
  572. package/dist/packages/textfield/textfield.react.stories.js +31 -31
  573. package/dist/packages/textfield/textfield.react.test.js +7 -7
  574. package/dist/packages/textfield/textfield.stories.d.ts +4 -4
  575. package/dist/packages/textfield/textfield.stories.js +107 -89
  576. package/dist/packages/textfield/textfield.test.d.ts +2 -2
  577. package/dist/packages/textfield/textfield.test.js +103 -71
  578. package/dist/packages/toast/api.d.ts +1 -1
  579. package/dist/packages/toast/api.js +3 -3
  580. package/dist/packages/toast/index.d.ts +5 -5
  581. package/dist/packages/toast/index.js +5 -5
  582. package/dist/packages/toast/styles.js +1 -1
  583. package/dist/packages/toast/toast.d.ts +4 -4
  584. package/dist/packages/toast/toast.js +346 -317
  585. package/dist/packages/toast/toast.js.map +2 -2
  586. package/dist/packages/toast/toast.stories.d.ts +4 -4
  587. package/dist/packages/toast/toast.stories.js +37 -16
  588. package/dist/packages/toast/toast.test.d.ts +1 -1
  589. package/dist/packages/toast/toast.test.js +48 -31
  590. package/dist/packages/toast/types.d.ts +1 -1
  591. package/dist/packages/toast-container/styles.js +1 -1
  592. package/dist/packages/toast-container/toast-container.d.ts +2 -2
  593. package/dist/packages/toast-container/toast-container.js +292 -291
  594. package/dist/packages/toast-container/toast-container.js.map +3 -3
  595. package/dist/packages/utils/element-collapse.js +38 -28
  596. package/dist/packages/utils/expand-transition.d.ts +1 -1
  597. package/dist/packages/utils/expand-transition.js +12 -10
  598. package/dist/packages/utils/unstyled-heading.d.ts +1 -1
  599. package/dist/packages/utils/unstyled-heading.js +4 -4
  600. package/dist/packages/utils/window-exists.js +1 -1
  601. package/dist/packages/utils.js +2 -2
  602. package/dist/setup-tests.d.ts +3 -3
  603. package/dist/setup-tests.js +16 -13
  604. package/dist/tests/react-hydration.js +29 -30
  605. package/dist/tests/react-ssr-attributes.d.ts +1 -1
  606. package/dist/tests/react-ssr-attributes.js +4 -4
  607. package/dist/web-types.json +61 -22
  608. package/eik/index.js +12 -12
  609. package/package.json +18 -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
  *