microui-wc 0.1.0 → 0.1.2

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 (343) hide show
  1. package/AGENTS.md +71 -71
  2. package/CHANGELOG.md +1 -1
  3. package/README.md +14 -9
  4. package/dist/AGENTS.md +116 -116
  5. package/dist/README.md +21 -16
  6. package/dist/components.css +1 -1
  7. package/dist/microui.css +1 -1
  8. package/dist/microui.esm.js.map +1 -1
  9. package/dist/microui.min.js.map +1 -1
  10. package/dist/styles/components/switch.css +1 -1
  11. package/docs/getting-started.md +3 -3
  12. package/package.json +38 -10
  13. package/src/components/mu-schema-form.js +1 -1
  14. package/src/styles/components/switch.css +7 -8
  15. package/src/styles/components.css +6 -6
  16. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -40
  17. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -33
  18. package/.github/PULL_REQUEST_TEMPLATE.md +0 -28
  19. package/.github/workflows/ci.yml +0 -42
  20. package/.github/workflows/deploy-pages.yml +0 -112
  21. package/CODE_OF_CONDUCT.md +0 -59
  22. package/CONTRIBUTING.md +0 -156
  23. package/SECURITY.md +0 -58
  24. package/app/.generated/routes/alerts.js +0 -8
  25. package/app/.generated/routes/avatars.js +0 -8
  26. package/app/.generated/routes/badges.js +0 -8
  27. package/app/.generated/routes/buttons.js +0 -10
  28. package/app/.generated/routes/cards.js +0 -10
  29. package/app/.generated/routes/checkboxes.js +0 -9
  30. package/app/.generated/routes/chips.js +0 -8
  31. package/app/.generated/routes/dropdowns.js +0 -9
  32. package/app/.generated/routes/home.js +0 -7
  33. package/app/.generated/routes/icons.js +0 -9
  34. package/app/.generated/routes/inputs.js +0 -10
  35. package/app/.generated/routes/installation.js +0 -7
  36. package/app/.generated/routes/layout.js +0 -9
  37. package/app/.generated/routes/modals.js +0 -9
  38. package/app/.generated/routes/navbar.js +0 -7
  39. package/app/.generated/routes/progress.js +0 -9
  40. package/app/.generated/routes/radios.js +0 -9
  41. package/app/.generated/routes/switches.js +0 -9
  42. package/app/.generated/routes/tabs.js +0 -8
  43. package/app/.generated/routes/toasts.js +0 -9
  44. package/app/index.html +0 -67
  45. package/app/pages/alerts.html +0 -23
  46. package/app/pages/avatars.html +0 -22
  47. package/app/pages/badges.html +0 -22
  48. package/app/pages/buttons.html +0 -71
  49. package/app/pages/cards.html +0 -54
  50. package/app/pages/checkboxes.html +0 -39
  51. package/app/pages/chips.html +0 -23
  52. package/app/pages/dropdowns.html +0 -41
  53. package/app/pages/home.html +0 -59
  54. package/app/pages/icons.html +0 -29
  55. package/app/pages/inputs.html +0 -66
  56. package/app/pages/installation.html +0 -34
  57. package/app/pages/layout.html +0 -30
  58. package/app/pages/modals.html +0 -21
  59. package/app/pages/navbar.html +0 -22
  60. package/app/pages/progress.html +0 -35
  61. package/app/pages/radios.html +0 -40
  62. package/app/pages/switches.html +0 -39
  63. package/app/pages/tabs.html +0 -30
  64. package/app/pages/toasts.html +0 -22
  65. package/app-dist/index.html +0 -67
  66. package/app-dist/pages/alerts.html +0 -23
  67. package/app-dist/pages/avatars.html +0 -22
  68. package/app-dist/pages/badges.html +0 -22
  69. package/app-dist/pages/buttons.html +0 -71
  70. package/app-dist/pages/cards.html +0 -54
  71. package/app-dist/pages/checkboxes.html +0 -39
  72. package/app-dist/pages/chips.html +0 -23
  73. package/app-dist/pages/dropdowns.html +0 -41
  74. package/app-dist/pages/home.html +0 -59
  75. package/app-dist/pages/icons.html +0 -29
  76. package/app-dist/pages/inputs.html +0 -66
  77. package/app-dist/pages/installation.html +0 -34
  78. package/app-dist/pages/layout.html +0 -30
  79. package/app-dist/pages/modals.html +0 -21
  80. package/app-dist/pages/navbar.html +0 -22
  81. package/app-dist/pages/progress.html +0 -35
  82. package/app-dist/pages/radios.html +0 -40
  83. package/app-dist/pages/switches.html +0 -39
  84. package/app-dist/pages/tabs.html +0 -30
  85. package/app-dist/pages/toasts.html +0 -22
  86. package/app-dist/pages.json +0 -217
  87. package/app-dist/routes/alerts.js +0 -5
  88. package/app-dist/routes/avatars.js +0 -1
  89. package/app-dist/routes/badges.js +0 -1
  90. package/app-dist/routes/buttons.js +0 -1
  91. package/app-dist/routes/cards.js +0 -1
  92. package/app-dist/routes/checkboxes.js +0 -9
  93. package/app-dist/routes/chips.js +0 -4
  94. package/app-dist/routes/chunk-019e5e2f.js +0 -5
  95. package/app-dist/routes/chunk-0m4j19yd.js +0 -2
  96. package/app-dist/routes/chunk-0tmmp5q0.js +0 -1
  97. package/app-dist/routes/chunk-10xn709r.js +0 -1
  98. package/app-dist/routes/chunk-15m2qcda.js +0 -2
  99. package/app-dist/routes/chunk-1bh8g23n.js +0 -1
  100. package/app-dist/routes/chunk-1vg0v937.js +0 -1
  101. package/app-dist/routes/chunk-1zvcgy3j.js +0 -1
  102. package/app-dist/routes/chunk-2afb0861.js +0 -1
  103. package/app-dist/routes/chunk-2c6ttpzt.js +0 -5
  104. package/app-dist/routes/chunk-3dy30fhs.js +0 -1
  105. package/app-dist/routes/chunk-426dnces.js +0 -13
  106. package/app-dist/routes/chunk-44kgxery.js +0 -1
  107. package/app-dist/routes/chunk-47fdnejd.js +0 -33
  108. package/app-dist/routes/chunk-49a6t2vq.js +0 -1
  109. package/app-dist/routes/chunk-4fe1rm5b.js +0 -1
  110. package/app-dist/routes/chunk-4ggmvkta.js +0 -33
  111. package/app-dist/routes/chunk-4vkz81q7.js +0 -33
  112. package/app-dist/routes/chunk-4w4tmj8f.js +0 -31
  113. package/app-dist/routes/chunk-532s62kr.js +0 -31
  114. package/app-dist/routes/chunk-5hm3bssy.js +0 -33
  115. package/app-dist/routes/chunk-5vrh24hc.js +0 -1
  116. package/app-dist/routes/chunk-61pcg25a.js +0 -1
  117. package/app-dist/routes/chunk-6nfhygvf.js +0 -1
  118. package/app-dist/routes/chunk-700e7je6.js +0 -33
  119. package/app-dist/routes/chunk-7fsn17kg.js +0 -1
  120. package/app-dist/routes/chunk-7k789b32.js +0 -1
  121. package/app-dist/routes/chunk-7r46q0ys.js +0 -36
  122. package/app-dist/routes/chunk-86fmc1fr.js +0 -5
  123. package/app-dist/routes/chunk-8qth37vw.js +0 -1
  124. package/app-dist/routes/chunk-924wv8n0.js +0 -1
  125. package/app-dist/routes/chunk-9mbhgxk9.js +0 -1
  126. package/app-dist/routes/chunk-a216hyd9.js +0 -1
  127. package/app-dist/routes/chunk-akzxykh9.js +0 -33
  128. package/app-dist/routes/chunk-b3dcvy8c.js +0 -1
  129. package/app-dist/routes/chunk-b74zahz5.js +0 -31
  130. package/app-dist/routes/chunk-bftj53p2.js +0 -5
  131. package/app-dist/routes/chunk-c01hnz3e.js +0 -1
  132. package/app-dist/routes/chunk-d8pvv5km.js +0 -1
  133. package/app-dist/routes/chunk-dev0aezr.js +0 -2
  134. package/app-dist/routes/chunk-dh6vnv0e.js +0 -1
  135. package/app-dist/routes/chunk-dn2cbpva.js +0 -36
  136. package/app-dist/routes/chunk-dvn0my90.js +0 -1
  137. package/app-dist/routes/chunk-dvq8mnve.js +0 -36
  138. package/app-dist/routes/chunk-e8c2gc4d.js +0 -5
  139. package/app-dist/routes/chunk-ejf9ak2x.js +0 -1
  140. package/app-dist/routes/chunk-f083m55s.js +0 -1
  141. package/app-dist/routes/chunk-fnrj28s1.js +0 -31
  142. package/app-dist/routes/chunk-fvg3yjdp.js +0 -31
  143. package/app-dist/routes/chunk-g7k381n1.js +0 -1
  144. package/app-dist/routes/chunk-h01kq2ae.js +0 -13
  145. package/app-dist/routes/chunk-h4dk761v.js +0 -5
  146. package/app-dist/routes/chunk-hmx91z2x.js +0 -5
  147. package/app-dist/routes/chunk-hxbg4m42.js +0 -36
  148. package/app-dist/routes/chunk-jbjnfp2b.js +0 -2
  149. package/app-dist/routes/chunk-jxtz5vv6.js +0 -36
  150. package/app-dist/routes/chunk-jxzcs0ey.js +0 -36
  151. package/app-dist/routes/chunk-kt7wwhcx.js +0 -1
  152. package/app-dist/routes/chunk-kzptszyc.js +0 -33
  153. package/app-dist/routes/chunk-mhgca4w4.js +0 -2
  154. package/app-dist/routes/chunk-mhswxa20.js +0 -1
  155. package/app-dist/routes/chunk-n8zfeex6.js +0 -1
  156. package/app-dist/routes/chunk-pee47b2r.js +0 -1
  157. package/app-dist/routes/chunk-pesmw829.js +0 -1
  158. package/app-dist/routes/chunk-pgc4c6f3.js +0 -36
  159. package/app-dist/routes/chunk-q8egegm1.js +0 -1
  160. package/app-dist/routes/chunk-q9mn2qyq.js +0 -36
  161. package/app-dist/routes/chunk-qh0rtaf3.js +0 -5
  162. package/app-dist/routes/chunk-qqhmk6ye.js +0 -2
  163. package/app-dist/routes/chunk-qrxygmf7.js +0 -33
  164. package/app-dist/routes/chunk-r46yzksx.js +0 -36
  165. package/app-dist/routes/chunk-rgpbw2w0.js +0 -5
  166. package/app-dist/routes/chunk-rnpzv3d8.js +0 -2
  167. package/app-dist/routes/chunk-s5v8cv05.js +0 -2
  168. package/app-dist/routes/chunk-sbwn5bpc.js +0 -1
  169. package/app-dist/routes/chunk-sqbg8jbt.js +0 -33
  170. package/app-dist/routes/chunk-sv8dqnf7.js +0 -1
  171. package/app-dist/routes/chunk-t67sw3za.js +0 -1
  172. package/app-dist/routes/chunk-tjdpqwdf.js +0 -31
  173. package/app-dist/routes/chunk-tq2mfghg.js +0 -1
  174. package/app-dist/routes/chunk-ttn10vt6.js +0 -1
  175. package/app-dist/routes/chunk-v2hzpjxr.js +0 -1
  176. package/app-dist/routes/chunk-wfjjkw9y.js +0 -1
  177. package/app-dist/routes/chunk-wt8cxzmf.js +0 -31
  178. package/app-dist/routes/chunk-x45d372k.js +0 -5
  179. package/app-dist/routes/chunk-y3wsazkt.js +0 -1
  180. package/app-dist/routes/chunk-y7pmgc7t.js +0 -33
  181. package/app-dist/routes/chunk-zefdt2q3.js +0 -31
  182. package/app-dist/routes/dropdowns.js +0 -6
  183. package/app-dist/routes/home.js +0 -1
  184. package/app-dist/routes/icons.js +0 -1
  185. package/app-dist/routes/inputs.js +0 -12
  186. package/app-dist/routes/installation.js +0 -1
  187. package/app-dist/routes/layout.js +0 -1
  188. package/app-dist/routes/modals.js +0 -7
  189. package/app-dist/routes/navbar.js +0 -1
  190. package/app-dist/routes/progress.js +0 -1
  191. package/app-dist/routes/radios.js +0 -6
  192. package/app-dist/routes/switches.js +0 -6
  193. package/app-dist/routes/tabs.js +0 -1
  194. package/app-dist/routes/toasts.js +0 -16
  195. package/assets/fonts/material-symbols-mini.woff2 +0 -0
  196. package/assets/fonts/material-symbols.woff2 +0 -0
  197. package/assets/fonts/roboto-400.woff2 +0 -0
  198. package/assets/fonts/roboto-500.woff2 +0 -0
  199. package/assets/fonts/roboto-700.woff2 +0 -0
  200. package/assets/logo-banner-400.jpg +0 -0
  201. package/assets/logo-banner-400.webp +0 -0
  202. package/assets/logo-banner-800.webp +0 -0
  203. package/assets/logo-banner.jpg +0 -0
  204. package/assets/logo-icon-64.jpg +0 -0
  205. package/assets/logo-icon-64.webp +0 -0
  206. package/assets/logo-icon.jpg +0 -0
  207. package/assets/logo-square.jpg +0 -0
  208. package/bun.lock +0 -312
  209. package/bunfig.toml +0 -4
  210. package/custom-elements.json +0 -1916
  211. package/demo/api/sample-data.json +0 -38
  212. package/demo/content/alerts.html +0 -115
  213. package/demo/content/avatars.html +0 -70
  214. package/demo/content/badges.html +0 -65
  215. package/demo/content/buttons.html +0 -188
  216. package/demo/content/callouts.html +0 -91
  217. package/demo/content/cards.html +0 -121
  218. package/demo/content/checkboxes.html +0 -178
  219. package/demo/content/chips.html +0 -67
  220. package/demo/content/codeblocks.html +0 -101
  221. package/demo/content/confirms.html +0 -115
  222. package/demo/content/datatables.html +0 -149
  223. package/demo/content/dividers.html +0 -119
  224. package/demo/content/dropdowns.html +0 -89
  225. package/demo/content/enterprise.html +0 -252
  226. package/demo/content/home.html +0 -149
  227. package/demo/content/icons.html +0 -89
  228. package/demo/content/inputs.html +0 -135
  229. package/demo/content/installation.html +0 -16
  230. package/demo/content/layout.html +0 -136
  231. package/demo/content/modals.html +0 -141
  232. package/demo/content/navbar.html +0 -70
  233. package/demo/content/progress.html +0 -119
  234. package/demo/content/radios.html +0 -88
  235. package/demo/content/skeletons.html +0 -109
  236. package/demo/content/spinners.html +0 -96
  237. package/demo/content/switches.html +0 -84
  238. package/demo/content/tables.html +0 -124
  239. package/demo/content/tabs.html +0 -85
  240. package/demo/content/toasts.html +0 -116
  241. package/demo/content/tooltips.html +0 -107
  242. package/demo/content/virtual-lists.html +0 -233
  243. package/demo/favicon.ico +0 -0
  244. package/demo/favicon.png +0 -0
  245. package/demo/full.html +0 -52
  246. package/demo/iife.html +0 -46
  247. package/demo/manifest.json +0 -34
  248. package/demo/pages/datatable-demo.html +0 -237
  249. package/demo/pages/prompt-ui-demo.html +0 -218
  250. package/demo/pages/responsive-demo.html +0 -122
  251. package/demo/pages/schema-form-demo.html +0 -270
  252. package/demo/robots.txt +0 -6
  253. package/demo/shell.html +0 -712
  254. package/demo/sw.js +0 -387
  255. package/lighthouse-audit.mjs +0 -113
  256. package/scripts/analyze-components.js +0 -105
  257. package/scripts/build-app.js +0 -193
  258. package/scripts/build-framework.js +0 -444
  259. package/scripts/build-utils.js +0 -101
  260. package/scripts/test-isolated.js +0 -151
  261. package/server.js +0 -256
  262. package/tests/agents/agent-integration.test.js +0 -76
  263. package/tests/benchmark.html +0 -296
  264. package/tests/build/scan-components.test.js +0 -173
  265. package/tests/components/all-components.test.js +0 -245
  266. package/tests/components/all-missing-components.test.js +0 -574
  267. package/tests/components/mu-alert.test.js +0 -113
  268. package/tests/components/mu-avatar.test.js +0 -148
  269. package/tests/components/mu-badge.test.js +0 -92
  270. package/tests/components/mu-button.test.js +0 -112
  271. package/tests/components/mu-card.test.js +0 -89
  272. package/tests/components/mu-checkbox.test.js +0 -158
  273. package/tests/components/mu-chip.test.js +0 -118
  274. package/tests/components/mu-container.test.js +0 -120
  275. package/tests/components/mu-divider.test.js +0 -98
  276. package/tests/components/mu-drawer-item.test.js +0 -199
  277. package/tests/components/mu-drawer.test.js +0 -96
  278. package/tests/components/mu-dropdown.test.js +0 -125
  279. package/tests/components/mu-form.test.js +0 -138
  280. package/tests/components/mu-grid.test.js +0 -135
  281. package/tests/components/mu-icon.test.js +0 -110
  282. package/tests/components/mu-input.test.js +0 -131
  283. package/tests/components/mu-lazy.test.js +0 -103
  284. package/tests/components/mu-modal.test.js +0 -275
  285. package/tests/components/mu-navbar.test.js +0 -101
  286. package/tests/components/mu-progress.test.js +0 -115
  287. package/tests/components/mu-radio.test.js +0 -114
  288. package/tests/components/mu-repeat.test.js +0 -106
  289. package/tests/components/mu-sidebar.test.js +0 -126
  290. package/tests/components/mu-skeleton.test.js +0 -162
  291. package/tests/components/mu-stack.test.js +0 -143
  292. package/tests/components/mu-switch.test.js +0 -292
  293. package/tests/components/mu-table.test.js +0 -124
  294. package/tests/components/mu-tabs.test.js +0 -104
  295. package/tests/components/mu-textarea.test.js +0 -115
  296. package/tests/components/mu-toast.test.js +0 -321
  297. package/tests/components/mu-tooltip.test.js +0 -133
  298. package/tests/components/mu-virtual-list.test.js +0 -109
  299. package/tests/core/MuElement.test.js +0 -120
  300. package/tests/core/agent-api.test.js +0 -125
  301. package/tests/core/all-core-modules.test.js +0 -442
  302. package/tests/core/bus.test.js +0 -364
  303. package/tests/core/component-schema.test.js +0 -160
  304. package/tests/core/feature-registry.test.js +0 -198
  305. package/tests/core/form-state.test.js +0 -167
  306. package/tests/core/http.test.js +0 -119
  307. package/tests/core/keyboard.test.js +0 -319
  308. package/tests/core/layers.test.js +0 -129
  309. package/tests/core/namespaced-stores.test.js +0 -114
  310. package/tests/core/render.test.js +0 -121
  311. package/tests/core/ripple.test.js +0 -131
  312. package/tests/core/router.test.js +0 -89
  313. package/tests/core/scheduler.test.js +0 -121
  314. package/tests/core/signals.test.js +0 -128
  315. package/tests/core/store.test.js +0 -171
  316. package/tests/core/transitions.test.js +0 -82
  317. package/tests/e2e/accessibility-harness.html +0 -58
  318. package/tests/e2e/accessibility.test.js +0 -401
  319. package/tests/e2e/agent-features.test.js +0 -372
  320. package/tests/e2e/card-spacing.test.js +0 -287
  321. package/tests/e2e/components.test.js +0 -439
  322. package/tests/e2e/demo-routes.test.js +0 -478
  323. package/tests/e2e/layout-css-fallback.test.js +0 -334
  324. package/tests/e2e/mu-alert.e2e.test.js +0 -111
  325. package/tests/e2e/mu-checkbox.test.js +0 -489
  326. package/tests/e2e/mu-chip.test.js +0 -347
  327. package/tests/e2e/mu-form.test.js +0 -499
  328. package/tests/e2e/mu-icon.test.js +0 -114
  329. package/tests/e2e/mu-radio.test.js +0 -113
  330. package/tests/e2e/mu-skeleton.test.js +0 -140
  331. package/tests/e2e/mu-switch.test.js +0 -415
  332. package/tests/e2e/mu-tabs.test.js +0 -494
  333. package/tests/e2e/mu-textarea.test.js +0 -242
  334. package/tests/e2e/mu-virtual-list.test.js +0 -427
  335. package/tests/e2e/perf-memory.test.js +0 -161
  336. package/tests/e2e/puppeteer-helper.js +0 -137
  337. package/tests/e2e/puppeteer.test.js +0 -226
  338. package/tests/e2e/pwa.test.js +0 -261
  339. package/tests/e2e/test-harness.html +0 -319
  340. package/tests/manual/test-components.html +0 -120
  341. package/tests/memory-test.html +0 -309
  342. package/tests/setup-dom.js +0 -93
  343. package/tests/visual-test.html +0 -301
package/tests/e2e/components.test.js DELETED
@@ -1,439 +0,0 @@
1
- /**
2
- * @fileoverview E2E Tests for All Components requiring real browser
3
- * Covers: mu-button, mu-toast, mu-input, mu-dropdown, theme-toggle, layout, sidebar
4
- */
5
-
6
- import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
7
- import { launchBrowser, puppeteer } from './puppeteer-helper.js';
8
- import { fileURLToPath } from 'url';
9
- import { dirname, join } from 'path';
10
- import { mkdirSync, rmSync } from 'fs';
11
-
12
- const __filename = fileURLToPath(import.meta.url);
13
- const __dirname = dirname(__filename);
14
-
15
- describe('Components E2E Tests', () => {
16
- let browser;
17
- let page;
18
- let server;
19
- const userDataDir = `./.tmp/puppeteer-components-${Date.now()}-${Math.random().toString(36).slice(2)}`;
20
-
21
- beforeAll(async () => {
22
- mkdirSync(userDataDir, { recursive: true });
23
-
24
- const projectRoot = join(__dirname, '../..');
25
- server = Bun.serve({
26
- port: 0,
27
- async fetch(req) {
28
- const url = new URL(req.url);
29
- let filePath = join(projectRoot, url.pathname);
30
-
31
- if (url.pathname === '/') {
32
- return new Response(`<!DOCTYPE html>
33
- <html data-theme="light">
34
- <head>
35
- <title>Component Test</title>
36
- <link rel="stylesheet" href="/dist/microui.min.css">
37
- <style>
38
- :root {
39
- --mu-color-primary: #6750a4;
40
- --mu-color-surface: #ffffff;
41
- }
42
- [data-theme="dark"] {
43
- --mu-color-primary: #cfbcff;
44
- --mu-color-surface: #1c1b1f;
45
- }
46
- .app-main { min-height: 100vh; }
47
- .sidebar { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
48
- .page { display: none; }
49
- .page.active { display: block; }
50
- </style>
51
- </head>
52
- <body>
53
- <div class="app-main">
54
- <nav class="sidebar">
55
- <a href="#home" data-page="home" class="sidebar-link active">Home</a>
56
- <a href="#about" data-page="about" class="sidebar-link">About</a>
57
- </nav>
58
- <main>
59
- <div class="page active" id="home">Home Page</div>
60
- <div class="page" id="about">About Page</div>
61
- </main>
62
- </div>
63
-
64
- <mu-button id="btn1" variant="filled" size="md">Primary Button</mu-button>
65
- <mu-button id="btn2" variant="text" size="lg">Text Button</mu-button>
66
- <mu-button id="btn-disabled" disabled>Disabled</mu-button>
67
- <mu-input id="input1" label="Email" placeholder="Enter email"></mu-input>
68
- <mu-dropdown id="dropdown1">
69
- <span slot="trigger">Select</span>
70
- <mu-option value="1">Option 1</mu-option>
71
- <mu-option value="2">Option 2</mu-option>
72
- </mu-dropdown>
73
- <mu-toast id="toast1" severity="info">Test Toast</mu-toast>
74
- <mu-checkbox id="check1">Accept Terms</mu-checkbox>
75
- <mu-switch id="switch1">Enable Feature</mu-switch>
76
- <mu-theme-toggle id="theme-toggle"></mu-theme-toggle>
77
-
78
- <script src="/dist/microui.min.js"></script>
79
- <script>
80
- function showPage(pageId) {
81
- window.scrollTo(0, 0);
82
- document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
83
- document.getElementById(pageId)?.classList.add('active');
84
- }
85
- </script>
86
- </body>
87
- </html>`, { headers: { 'Content-Type': 'text/html' } });
88
- }
89
-
90
- try {
91
- const file = Bun.file(filePath);
92
- if (!await file.exists()) {
93
- return new Response('Not Found', { status: 404 });
94
- }
95
- const content = await file.text();
96
- const ext = filePath.split('.').pop();
97
- const mimeTypes = { 'html': 'text/html', 'js': 'text/javascript', 'css': 'text/css' };
98
- return new Response(content, { headers: { 'Content-Type': mimeTypes[ext] || 'text/plain' } });
99
- } catch (e) {
100
- return new Response('Error: ' + e.message, { status: 500 });
101
- }
102
- }
103
- });
104
-
105
- browser = await launchBrowser({ testName: 'e2e' });
106
- page = await browser.newPage();
107
- await page.goto(`http://localhost:${server.port}`, { waitUntil: 'networkidle0', timeout: 30000 });
108
- await page.waitForFunction(() => typeof window.microUI !== 'undefined', { timeout: 15000 });
109
- }, 60000);
110
-
111
- afterAll(async () => {
112
- await browser?.close();
113
- server?.stop();
114
- try { rmSync(userDataDir, { recursive: true, force: true }); } catch { }
115
- });
116
-
117
- // ========================================
118
- // MU-BUTTON COMPONENT
119
- // ========================================
120
-
121
- describe('mu-button Component', () => {
122
- test('should be registered as custom element', async () => {
123
- const result = await page.evaluate(() => customElements.get('mu-button') !== undefined);
124
- expect(result).toBe(true);
125
- });
126
-
127
- test('should render with base class', async () => {
128
- const result = await page.evaluate(() => {
129
- const btn = document.querySelector('mu-button');
130
- return btn && btn.classList.contains('mu-button');
131
- });
132
- expect(result).toBe(true);
133
- });
134
-
135
- test('should apply variant attribute', async () => {
136
- const result = await page.evaluate(() => {
137
- const btn = document.querySelector('mu-button[variant="filled"]');
138
- return btn && btn.classList.contains('mu-button--filled');
139
- });
140
- expect(result).toBe(true);
141
- });
142
-
143
- test('should apply size attribute', async () => {
144
- const result = await page.evaluate(() => {
145
- const btn = document.querySelector('mu-button[size="lg"]');
146
- return btn && btn.classList.contains('mu-button--lg');
147
- });
148
- expect(result).toBe(true);
149
- });
150
-
151
- test('should have role=button', async () => {
152
- const result = await page.evaluate(() => {
153
- const btn = document.querySelector('mu-button');
154
- return btn && btn.getAttribute('role') === 'button';
155
- });
156
- expect(result).toBe(true);
157
- });
158
-
159
- test('should have tabindex=0 by default', async () => {
160
- const result = await page.evaluate(() => {
161
- const btn = document.querySelector('mu-button:not([disabled])');
162
- return btn && btn.getAttribute('tabindex') === '0';
163
- });
164
- expect(result).toBe(true);
165
- });
166
-
167
- test('should have tabindex=-1 when disabled', async () => {
168
- const result = await page.evaluate(() => {
169
- const btn = document.querySelector('mu-button[disabled]');
170
- return btn && btn.getAttribute('tabindex') === '-1';
171
- });
172
- expect(result).toBe(true);
173
- });
174
-
175
- test('should add is-disabled class when disabled', async () => {
176
- const result = await page.evaluate(() => {
177
- const btn = document.querySelector('mu-button[disabled]');
178
- return btn && btn.classList.contains('is-disabled');
179
- });
180
- expect(result).toBe(true);
181
- });
182
- });
183
-
184
- // ========================================
185
- // MU-INPUT COMPONENT
186
- // ========================================
187
-
188
- describe('mu-input Component', () => {
189
- test('should be registered', async () => {
190
- const result = await page.evaluate(() => customElements.get('mu-input') !== undefined);
191
- expect(result).toBe(true);
192
- });
193
-
194
- test('should render input field', async () => {
195
- const result = await page.evaluate(() => {
196
- const input = document.querySelector('mu-input');
197
- return input && input.querySelector('input') !== null;
198
- });
199
- expect(result).toBe(true);
200
- });
201
-
202
- test('should have label', async () => {
203
- const result = await page.evaluate(() => {
204
- const input = document.querySelector('mu-input[label]');
205
- return input && (input.querySelector('label') !== null || input.textContent.includes('Email'));
206
- });
207
- expect(result).toBe(true);
208
- });
209
- });
210
-
211
- // ========================================
212
- // MU-DROPDOWN COMPONENT
213
- // ========================================
214
-
215
- describe('mu-dropdown Component', () => {
216
- test('should be registered', async () => {
217
- const result = await page.evaluate(() => customElements.get('mu-dropdown') !== undefined);
218
- expect(result).toBe(true);
219
- });
220
-
221
- test('should have trigger element', async () => {
222
- const result = await page.evaluate(() => {
223
- const dropdown = document.querySelector('mu-dropdown');
224
- // Check for slotted trigger or internal button
225
- return dropdown && (
226
- dropdown.querySelector('[slot="trigger"]') !== null ||
227
- dropdown.querySelector('button') !== null ||
228
- dropdown.shadowRoot?.querySelector('button') !== null
229
- );
230
- });
231
- expect(result).toBe(true);
232
- });
233
-
234
- test('should have open/close/toggle methods', async () => {
235
- const result = await page.evaluate(() => {
236
- const dropdown = document.querySelector('mu-dropdown');
237
- return dropdown &&
238
- typeof dropdown.open === 'function' &&
239
- typeof dropdown.close === 'function' &&
240
- typeof dropdown.toggle === 'function';
241
- });
242
- expect(result).toBe(true);
243
- });
244
- });
245
-
246
- // ========================================
247
- // MU-TOAST COMPONENT
248
- // ========================================
249
-
250
- describe('mu-toast Component', () => {
251
- test('should be registered', async () => {
252
- const result = await page.evaluate(() => customElements.get('mu-toast') !== undefined);
253
- expect(result).toBe(true);
254
- });
255
-
256
- test('should have severity attribute', async () => {
257
- const result = await page.evaluate(() => {
258
- const toast = document.querySelector('mu-toast');
259
- return toast && toast.hasAttribute('severity');
260
- });
261
- expect(result).toBe(true);
262
- });
263
- });
264
-
265
- // ========================================
266
- // THEME TOGGLE
267
- // ========================================
268
-
269
- describe('Theme Toggle', () => {
270
- test('should have CSS variables in :root', async () => {
271
- const result = await page.evaluate(() => {
272
- const style = getComputedStyle(document.documentElement);
273
- return style.getPropertyValue('--mu-color-primary').trim().length > 0;
274
- });
275
- expect(result).toBe(true);
276
- });
277
-
278
- test('mu-theme-toggle should be registered', async () => {
279
- const result = await page.evaluate(() => customElements.get('mu-theme-toggle') !== undefined);
280
- expect(result).toBe(true);
281
- });
282
-
283
- test('should be able to set data-theme attribute', async () => {
284
- const result = await page.evaluate(() => {
285
- document.documentElement.setAttribute('data-theme', 'dark');
286
- const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
287
- document.documentElement.setAttribute('data-theme', 'light');
288
- return isDark;
289
- });
290
- expect(result).toBe(true);
291
- });
292
-
293
- test('should toggle between light and dark', async () => {
294
- const result = await page.evaluate(() => {
295
- document.documentElement.setAttribute('data-theme', 'light');
296
- const wasLight = document.documentElement.getAttribute('data-theme') === 'light';
297
- document.documentElement.setAttribute('data-theme', 'dark');
298
- const nowDark = document.documentElement.getAttribute('data-theme') === 'dark';
299
- document.documentElement.setAttribute('data-theme', 'light');
300
- return wasLight && nowDark;
301
- });
302
- expect(result).toBe(true);
303
- });
304
- });
305
-
306
- // ========================================
307
- // LAYOUT STABILITY
308
- // ========================================
309
-
310
- describe('Layout Stability', () => {
311
- test('should have min-height on .app-main', async () => {
312
- const result = await page.evaluate(() => {
313
- const main = document.querySelector('.app-main');
314
- if (!main) return false;
315
- const style = getComputedStyle(main);
316
- return parseInt(style.minHeight) > 0;
317
- });
318
- expect(result).toBe(true);
319
- });
320
-
321
- test('should have sticky positioned sidebar', async () => {
322
- const result = await page.evaluate(() => {
323
- const sidebar = document.querySelector('.sidebar');
324
- if (!sidebar) return false;
325
- const style = getComputedStyle(sidebar);
326
- return style.position === 'sticky';
327
- });
328
- expect(result).toBe(true);
329
- });
330
-
331
- test('should have page elements with display:none by default', async () => {
332
- const result = await page.evaluate(() => {
333
- const inactivePage = document.querySelector('.page:not(.active)');
334
- if (!inactivePage) return true; // If no inactive pages, test passes
335
- const style = getComputedStyle(inactivePage);
336
- return style.display === 'none';
337
- });
338
- expect(result).toBe(true);
339
- });
340
-
341
- test('should have .page.active with display:block', async () => {
342
- const result = await page.evaluate(() => {
343
- const activePage = document.querySelector('.page.active');
344
- if (!activePage) return false;
345
- const style = getComputedStyle(activePage);
346
- return style.display === 'block';
347
- });
348
- expect(result).toBe(true);
349
- });
350
- });
351
-
352
- // ========================================
353
- // SIDEBAR NAVIGATION
354
- // ========================================
355
-
356
- describe('Sidebar Navigation', () => {
357
- test('should have sidebar element', async () => {
358
- const result = await page.evaluate(() => document.querySelector('.sidebar') !== null);
359
- expect(result).toBe(true);
360
- });
361
-
362
- test('should have sidebar links with data-page attributes', async () => {
363
- const result = await page.evaluate(() => {
364
- const links = document.querySelectorAll('.sidebar-link[data-page]');
365
- return links.length > 0;
366
- });
367
- expect(result).toBe(true);
368
- });
369
-
370
- test('should have one active sidebar link by default', async () => {
371
- const result = await page.evaluate(() => {
372
- const activeLinks = document.querySelectorAll('.sidebar-link.active');
373
- return activeLinks.length === 1;
374
- });
375
- expect(result).toBe(true);
376
- });
377
-
378
- test('should have matching page elements for sidebar links', async () => {
379
- const result = await page.evaluate(() => {
380
- const links = document.querySelectorAll('.sidebar-link[data-page]');
381
- for (const link of links) {
382
- const pageId = link.getAttribute('data-page');
383
- if (!document.getElementById(pageId)) return false;
384
- }
385
- return true;
386
- });
387
- expect(result).toBe(true);
388
- });
389
-
390
- test('should have exactly one active page by default', async () => {
391
- const result = await page.evaluate(() => {
392
- const activePages = document.querySelectorAll('.page.active');
393
- return activePages.length === 1;
394
- });
395
- expect(result).toBe(true);
396
- });
397
- });
398
-
399
- // ========================================
400
- // NAVIGATION SCROLL RESET
401
- // ========================================
402
-
403
- describe('Navigation Scroll Reset', () => {
404
- test('showPage function should exist', async () => {
405
- const result = await page.evaluate(() => typeof window.showPage === 'function');
406
- expect(result).toBe(true);
407
- });
408
-
409
- test('showPage should scroll to top', async () => {
410
- const result = await page.evaluate(() => {
411
- window.scrollTo(0, 100);
412
- window.showPage('about');
413
- return window.scrollY === 0;
414
- });
415
- expect(result).toBe(true);
416
- });
417
- });
418
-
419
- // ========================================
420
- // OTHER COMPONENTS
421
- // ========================================
422
-
423
- describe('Other Components', () => {
424
- test('mu-checkbox should be registered', async () => {
425
- const result = await page.evaluate(() => customElements.get('mu-checkbox') !== undefined);
426
- expect(result).toBe(true);
427
- });
428
-
429
- test('mu-switch should be registered', async () => {
430
- const result = await page.evaluate(() => customElements.get('mu-switch') !== undefined);
431
- expect(result).toBe(true);
432
- });
433
-
434
- test('mu-option should be registered', async () => {
435
- const result = await page.evaluate(() => customElements.get('mu-option') !== undefined);
436
- expect(result).toBe(true);
437
- });
438
- });
439
- });