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/visual-test.html DELETED
@@ -1,301 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>microUI v0.1.0 - Complete Visual Test</title>
8
- <link rel="stylesheet" href="../src/styles/tokens.css">
9
- <link rel="stylesheet" href="../src/styles/components.css">
10
- <link rel="stylesheet" href="../src/styles/animations.css">
11
- <style>
12
- body {
13
- font-family: var(--md-sys-typescale-font);
14
- background: var(--md-sys-color-surface);
15
- color: var(--md-sys-color-on-surface);
16
- padding: 0;
17
- margin: 0;
18
- }
19
-
20
- .test-section {
21
- padding: 24px;
22
- border-bottom: 1px solid var(--md-sys-color-outline-variant);
23
- }
24
-
25
- .test-section h2 {
26
- margin-top: 0;
27
- color: var(--md-sys-color-primary);
28
- }
29
-
30
- .test-grid {
31
- display: grid;
32
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
33
- gap: 16px;
34
- }
35
-
36
- .test-item {
37
- background: var(--md-sys-color-surface-container);
38
- padding: 16px;
39
- border-radius: 8px;
40
- }
41
-
42
- .test-item label {
43
- display: block;
44
- font-size: 12px;
45
- color: var(--md-sys-color-on-surface-variant);
46
- margin-bottom: 8px;
47
- }
48
-
49
- .status {
50
- position: fixed;
51
- bottom: 16px;
52
- right: 16px;
53
- background: var(--md-sys-color-primary);
54
- color: var(--md-sys-color-on-primary);
55
- padding: 12px 20px;
56
- border-radius: 8px;
57
- font-weight: 600;
58
- }
59
- </style>
60
- </head>
61
-
62
- <body>
63
-
64
- <!-- NAVBAR TEST -->
65
- <mu-navbar sticky>
66
- <mu-navbar-brand>microUI Test Suite</mu-navbar-brand>
67
- <mu-navbar-links>
68
- <a href="#buttons">Buttons</a>
69
- <a href="#forms">Forms</a>
70
- <a href="#display">Display</a>
71
- </mu-navbar-links>
72
- <mu-navbar-actions>
73
- <mu-theme-toggle></mu-theme-toggle>
74
- </mu-navbar-actions>
75
- </mu-navbar>
76
-
77
- <!-- BUTTONS -->
78
- <section class="test-section" id="buttons">
79
- <h2>🔘 Buttons</h2>
80
- <div class="test-grid">
81
- <div class="test-item">
82
- <label>Variants</label>
83
- <mu-stack gap="sm">
84
- <mu-button variant="primary">Primary</mu-button>
85
- <mu-button variant="secondary">Secondary</mu-button>
86
- <mu-button variant="ghost">Ghost</mu-button>
87
- <mu-button variant="danger">Danger</mu-button>
88
- </mu-stack>
89
- </div>
90
- <div class="test-item">
91
- <label>Sizes</label>
92
- <mu-stack gap="sm">
93
- <mu-button size="sm">Small</mu-button>
94
- <mu-button size="md">Medium</mu-button>
95
- <mu-button size="lg">Large</mu-button>
96
- </mu-stack>
97
- </div>
98
- <div class="test-item">
99
- <label>States</label>
100
- <mu-stack gap="sm">
101
- <mu-button disabled>Disabled</mu-button>
102
- </mu-stack>
103
- </div>
104
- </div>
105
- </section>
106
-
107
- <!-- FORMS -->
108
- <section class="test-section" id="forms">
109
- <h2>📝 Form Elements</h2>
110
- <div class="test-grid">
111
- <div class="test-item">
112
- <label>Input</label>
113
- <mu-input placeholder="Type here..."></mu-input>
114
- </div>
115
- <div class="test-item">
116
- <label>Textarea</label>
117
- <mu-textarea placeholder="Multi-line..." rows="3"></mu-textarea>
118
- </div>
119
- <div class="test-item">
120
- <label>Checkbox</label>
121
- <mu-stack gap="sm">
122
- <mu-checkbox>Option 1</mu-checkbox>
123
- <mu-checkbox checked>Option 2 (checked)</mu-checkbox>
124
- </mu-stack>
125
- </div>
126
- <div class="test-item">
127
- <label>Switch</label>
128
- <mu-stack gap="sm">
129
- <mu-switch></mu-switch>
130
- <mu-switch checked></mu-switch>
131
- </mu-stack>
132
- </div>
133
- <div class="test-item">
134
- <label>Radio Group</label>
135
- <mu-radio-group value="b">
136
- <mu-radio value="a">Option A</mu-radio>
137
- <mu-radio value="b">Option B</mu-radio>
138
- <mu-radio value="c">Option C</mu-radio>
139
- </mu-radio-group>
140
- </div>
141
- <div class="test-item">
142
- <label>Dropdown</label>
143
- <mu-dropdown placeholder="Select...">
144
- <mu-option value="1">Option 1</mu-option>
145
- <mu-option value="2">Option 2</mu-option>
146
- <mu-option value="3">Option 3</mu-option>
147
- </mu-dropdown>
148
- </div>
149
- <div class="test-item">
150
- <label>Chips</label>
151
- <mu-stack direction="row" gap="sm" wrap>
152
- <mu-chip>Tag 1</mu-chip>
153
- <mu-chip selected>Selected</mu-chip>
154
- <mu-chip removable>Removable</mu-chip>
155
- </mu-stack>
156
- </div>
157
- </div>
158
- </section>
159
-
160
- <!-- DISPLAY -->
161
- <section class="test-section" id="display">
162
- <h2>📊 Display Components</h2>
163
- <div class="test-grid">
164
- <div class="test-item">
165
- <label>Card</label>
166
- <mu-card variant="elevated">
167
- <h4>Card Title</h4>
168
- <p>Card content here.</p>
169
- </mu-card>
170
- </div>
171
- <div class="test-item">
172
- <label>Avatar</label>
173
- <mu-stack direction="row" gap="sm">
174
- <mu-avatar initials="JD"></mu-avatar>
175
- <mu-avatar alt="John Doe" size="lg"></mu-avatar>
176
- </mu-stack>
177
- </div>
178
- <div class="test-item">
179
- <label>Badge</label>
180
- <mu-stack direction="row" gap="sm">
181
- <mu-badge variant="primary">New</mu-badge>
182
- <mu-badge variant="success">Active</mu-badge>
183
- </mu-stack>
184
- </div>
185
- <div class="test-item">
186
- <label>Progress</label>
187
- <mu-progress value="65" max="100"></mu-progress>
188
- </div>
189
- <div class="test-item">
190
- <label>Spinner</label>
191
- <mu-spinner></mu-spinner>
192
- </div>
193
- <div class="test-item">
194
- <label>Skeleton</label>
195
- <mu-skeleton variant="text" lines="3"></mu-skeleton>
196
- </div>
197
- <div class="test-item">
198
- <label>Alert</label>
199
- <mu-alert severity="success">Success message!</mu-alert>
200
- </div>
201
- <div class="test-item">
202
- <label>Icon</label>
203
- <mu-stack direction="row" gap="sm">
204
- <mu-icon name="check"></mu-icon>
205
- <mu-icon name="close"></mu-icon>
206
- <mu-icon name="settings"></mu-icon>
207
- <mu-icon name="user"></mu-icon>
208
- </mu-stack>
209
- </div>
210
- </div>
211
- </section>
212
-
213
- <!-- TABS -->
214
- <section class="test-section">
215
- <h2>🗂️ Tabs (Animation Test)</h2>
216
- <mu-tabs active="0" id="test-tabs">
217
- <mu-tab>Tab 1</mu-tab>
218
- <mu-tab>Tab 2</mu-tab>
219
- <mu-tab>Tab 3</mu-tab>
220
- </mu-tabs>
221
- <div id="tab-content"
222
- style="padding: 16px; background: var(--md-sys-color-surface-container); border-radius: 0 0 8px 8px;">
223
- Content for Tab 1
224
- </div>
225
- </section>
226
-
227
- <!-- TABLE -->
228
- <section class="test-section">
229
- <h2>📋 Table</h2>
230
- <mu-table>
231
- <mu-thead>
232
- <mu-tr>
233
- <mu-th>Name</mu-th>
234
- <mu-th>Email</mu-th>
235
- <mu-th>Status</mu-th>
236
- </mu-tr>
237
- </mu-thead>
238
- <mu-tbody>
239
- <mu-tr>
240
- <mu-td>John Doe</mu-td>
241
- <mu-td>john@example.com</mu-td>
242
- <mu-td><mu-badge variant="success">Active</mu-badge></mu-td>
243
- </mu-tr>
244
- <mu-tr>
245
- <mu-td>Jane Smith</mu-td>
246
- <mu-td>jane@example.com</mu-td>
247
- <mu-td><mu-badge variant="warning">Pending</mu-badge></mu-td>
248
- </mu-tr>
249
- </mu-tbody>
250
- </mu-table>
251
- </section>
252
-
253
- <!-- MODAL TEST -->
254
- <section class="test-section">
255
- <h2>🪟 Modal</h2>
256
- <mu-button variant="primary" onclick="document.getElementById('test-modal').open()">Open Modal</mu-button>
257
- <mu-modal id="test-modal" size="md">
258
- <h2>Test Modal</h2>
259
- <p>This is a test modal dialog.</p>
260
- <mu-divider></mu-divider>
261
- <mu-stack direction="row" justify="flex-end" gap="sm">
262
- <mu-button variant="ghost" onclick="document.getElementById('test-modal').close()">Cancel</mu-button>
263
- <mu-button variant="primary" onclick="document.getElementById('test-modal').close()">Confirm</mu-button>
264
- </mu-stack>
265
- </mu-modal>
266
- </section>
267
-
268
- <!-- ANIMATION TEST -->
269
- <section class="test-section">
270
- <h2>🎬 Animations</h2>
271
- <div class="test-grid">
272
- <div class="test-item">
273
- <label>Hover Effects</label>
274
- <mu-button class="mu-hover-lift">Lift on Hover</mu-button>
275
- </div>
276
- <div class="test-item">
277
- <label>Scale</label>
278
- <mu-button class="mu-hover-scale">Scale on Hover</mu-button>
279
- </div>
280
- </div>
281
- </section>
282
-
283
- <div class="status" id="status">Loading...</div>
284
-
285
- <script type="module">
286
- import '../src/index.js';
287
-
288
- // Count components
289
- setTimeout(() => {
290
- const count = document.querySelectorAll('[class^="mu-"]').length;
291
- document.getElementById('status').textContent = `✅ ${count} components rendered`;
292
- }, 500);
293
-
294
- // Tab change handler
295
- document.getElementById('test-tabs').addEventListener('mu-tab-change', (e) => {
296
- document.getElementById('tab-content').textContent = `Content for Tab ${e.detail.index + 1}`;
297
- });
298
- </script>
299
- </body>
300
-
301
- </html>