microui-wc 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/ISSUE_TEMPLATE/bug_report.md +40 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +33 -0
- package/.github/PULL_REQUEST_TEMPLATE.md +28 -0
- package/.github/workflows/ci.yml +42 -0
- package/.github/workflows/deploy-pages.yml +112 -0
- package/AGENTS.md +2366 -0
- package/CHANGELOG.md +47 -0
- package/CODE_OF_CONDUCT.md +59 -0
- package/CONTRIBUTING.md +156 -0
- package/LICENSE +190 -0
- package/README.md +254 -0
- package/SECURITY.md +58 -0
- package/app/.generated/routes/alerts.js +8 -0
- package/app/.generated/routes/avatars.js +8 -0
- package/app/.generated/routes/badges.js +8 -0
- package/app/.generated/routes/buttons.js +10 -0
- package/app/.generated/routes/cards.js +10 -0
- package/app/.generated/routes/checkboxes.js +9 -0
- package/app/.generated/routes/chips.js +8 -0
- package/app/.generated/routes/dropdowns.js +9 -0
- package/app/.generated/routes/home.js +7 -0
- package/app/.generated/routes/icons.js +9 -0
- package/app/.generated/routes/inputs.js +10 -0
- package/app/.generated/routes/installation.js +7 -0
- package/app/.generated/routes/layout.js +9 -0
- package/app/.generated/routes/modals.js +9 -0
- package/app/.generated/routes/navbar.js +7 -0
- package/app/.generated/routes/progress.js +9 -0
- package/app/.generated/routes/radios.js +9 -0
- package/app/.generated/routes/switches.js +9 -0
- package/app/.generated/routes/tabs.js +8 -0
- package/app/.generated/routes/toasts.js +9 -0
- package/app/index.html +67 -0
- package/app/pages/alerts.html +23 -0
- package/app/pages/avatars.html +22 -0
- package/app/pages/badges.html +22 -0
- package/app/pages/buttons.html +71 -0
- package/app/pages/cards.html +54 -0
- package/app/pages/checkboxes.html +39 -0
- package/app/pages/chips.html +23 -0
- package/app/pages/dropdowns.html +41 -0
- package/app/pages/home.html +59 -0
- package/app/pages/icons.html +29 -0
- package/app/pages/inputs.html +66 -0
- package/app/pages/installation.html +34 -0
- package/app/pages/layout.html +30 -0
- package/app/pages/modals.html +21 -0
- package/app/pages/navbar.html +22 -0
- package/app/pages/progress.html +35 -0
- package/app/pages/radios.html +40 -0
- package/app/pages/switches.html +39 -0
- package/app/pages/tabs.html +30 -0
- package/app/pages/toasts.html +22 -0
- package/app-dist/index.html +67 -0
- package/app-dist/pages/alerts.html +23 -0
- package/app-dist/pages/avatars.html +22 -0
- package/app-dist/pages/badges.html +22 -0
- package/app-dist/pages/buttons.html +71 -0
- package/app-dist/pages/cards.html +54 -0
- package/app-dist/pages/checkboxes.html +39 -0
- package/app-dist/pages/chips.html +23 -0
- package/app-dist/pages/dropdowns.html +41 -0
- package/app-dist/pages/home.html +59 -0
- package/app-dist/pages/icons.html +29 -0
- package/app-dist/pages/inputs.html +66 -0
- package/app-dist/pages/installation.html +34 -0
- package/app-dist/pages/layout.html +30 -0
- package/app-dist/pages/modals.html +21 -0
- package/app-dist/pages/navbar.html +22 -0
- package/app-dist/pages/progress.html +35 -0
- package/app-dist/pages/radios.html +40 -0
- package/app-dist/pages/switches.html +39 -0
- package/app-dist/pages/tabs.html +30 -0
- package/app-dist/pages/toasts.html +22 -0
- package/app-dist/pages.json +217 -0
- package/app-dist/routes/alerts.js +5 -0
- package/app-dist/routes/avatars.js +1 -0
- package/app-dist/routes/badges.js +1 -0
- package/app-dist/routes/buttons.js +1 -0
- package/app-dist/routes/cards.js +1 -0
- package/app-dist/routes/checkboxes.js +9 -0
- package/app-dist/routes/chips.js +4 -0
- package/app-dist/routes/chunk-019e5e2f.js +5 -0
- package/app-dist/routes/chunk-0m4j19yd.js +2 -0
- package/app-dist/routes/chunk-0tmmp5q0.js +1 -0
- package/app-dist/routes/chunk-10xn709r.js +1 -0
- package/app-dist/routes/chunk-15m2qcda.js +2 -0
- package/app-dist/routes/chunk-1bh8g23n.js +1 -0
- package/app-dist/routes/chunk-1vg0v937.js +1 -0
- package/app-dist/routes/chunk-1zvcgy3j.js +1 -0
- package/app-dist/routes/chunk-2afb0861.js +1 -0
- package/app-dist/routes/chunk-2c6ttpzt.js +5 -0
- package/app-dist/routes/chunk-3dy30fhs.js +1 -0
- package/app-dist/routes/chunk-426dnces.js +13 -0
- package/app-dist/routes/chunk-44kgxery.js +1 -0
- package/app-dist/routes/chunk-47fdnejd.js +33 -0
- package/app-dist/routes/chunk-49a6t2vq.js +1 -0
- package/app-dist/routes/chunk-4fe1rm5b.js +1 -0
- package/app-dist/routes/chunk-4ggmvkta.js +33 -0
- package/app-dist/routes/chunk-4vkz81q7.js +33 -0
- package/app-dist/routes/chunk-4w4tmj8f.js +31 -0
- package/app-dist/routes/chunk-532s62kr.js +31 -0
- package/app-dist/routes/chunk-5hm3bssy.js +33 -0
- package/app-dist/routes/chunk-5vrh24hc.js +1 -0
- package/app-dist/routes/chunk-61pcg25a.js +1 -0
- package/app-dist/routes/chunk-6nfhygvf.js +1 -0
- package/app-dist/routes/chunk-700e7je6.js +33 -0
- package/app-dist/routes/chunk-7fsn17kg.js +1 -0
- package/app-dist/routes/chunk-7k789b32.js +1 -0
- package/app-dist/routes/chunk-7r46q0ys.js +36 -0
- package/app-dist/routes/chunk-86fmc1fr.js +5 -0
- package/app-dist/routes/chunk-8qth37vw.js +1 -0
- package/app-dist/routes/chunk-924wv8n0.js +1 -0
- package/app-dist/routes/chunk-9mbhgxk9.js +1 -0
- package/app-dist/routes/chunk-a216hyd9.js +1 -0
- package/app-dist/routes/chunk-akzxykh9.js +33 -0
- package/app-dist/routes/chunk-b3dcvy8c.js +1 -0
- package/app-dist/routes/chunk-b74zahz5.js +31 -0
- package/app-dist/routes/chunk-bftj53p2.js +5 -0
- package/app-dist/routes/chunk-c01hnz3e.js +1 -0
- package/app-dist/routes/chunk-d8pvv5km.js +1 -0
- package/app-dist/routes/chunk-dev0aezr.js +2 -0
- package/app-dist/routes/chunk-dh6vnv0e.js +1 -0
- package/app-dist/routes/chunk-dn2cbpva.js +36 -0
- package/app-dist/routes/chunk-dvn0my90.js +1 -0
- package/app-dist/routes/chunk-dvq8mnve.js +36 -0
- package/app-dist/routes/chunk-e8c2gc4d.js +5 -0
- package/app-dist/routes/chunk-ejf9ak2x.js +1 -0
- package/app-dist/routes/chunk-f083m55s.js +1 -0
- package/app-dist/routes/chunk-fnrj28s1.js +31 -0
- package/app-dist/routes/chunk-fvg3yjdp.js +31 -0
- package/app-dist/routes/chunk-g7k381n1.js +1 -0
- package/app-dist/routes/chunk-h01kq2ae.js +13 -0
- package/app-dist/routes/chunk-h4dk761v.js +5 -0
- package/app-dist/routes/chunk-hmx91z2x.js +5 -0
- package/app-dist/routes/chunk-hxbg4m42.js +36 -0
- package/app-dist/routes/chunk-jbjnfp2b.js +2 -0
- package/app-dist/routes/chunk-jxtz5vv6.js +36 -0
- package/app-dist/routes/chunk-jxzcs0ey.js +36 -0
- package/app-dist/routes/chunk-kt7wwhcx.js +1 -0
- package/app-dist/routes/chunk-kzptszyc.js +33 -0
- package/app-dist/routes/chunk-mhgca4w4.js +2 -0
- package/app-dist/routes/chunk-mhswxa20.js +1 -0
- package/app-dist/routes/chunk-n8zfeex6.js +1 -0
- package/app-dist/routes/chunk-pee47b2r.js +1 -0
- package/app-dist/routes/chunk-pesmw829.js +1 -0
- package/app-dist/routes/chunk-pgc4c6f3.js +36 -0
- package/app-dist/routes/chunk-q8egegm1.js +1 -0
- package/app-dist/routes/chunk-q9mn2qyq.js +36 -0
- package/app-dist/routes/chunk-qh0rtaf3.js +5 -0
- package/app-dist/routes/chunk-qqhmk6ye.js +2 -0
- package/app-dist/routes/chunk-qrxygmf7.js +33 -0
- package/app-dist/routes/chunk-r46yzksx.js +36 -0
- package/app-dist/routes/chunk-rgpbw2w0.js +5 -0
- package/app-dist/routes/chunk-rnpzv3d8.js +2 -0
- package/app-dist/routes/chunk-s5v8cv05.js +2 -0
- package/app-dist/routes/chunk-sbwn5bpc.js +1 -0
- package/app-dist/routes/chunk-sqbg8jbt.js +33 -0
- package/app-dist/routes/chunk-sv8dqnf7.js +1 -0
- package/app-dist/routes/chunk-t67sw3za.js +1 -0
- package/app-dist/routes/chunk-tjdpqwdf.js +31 -0
- package/app-dist/routes/chunk-tq2mfghg.js +1 -0
- package/app-dist/routes/chunk-ttn10vt6.js +1 -0
- package/app-dist/routes/chunk-v2hzpjxr.js +1 -0
- package/app-dist/routes/chunk-wfjjkw9y.js +1 -0
- package/app-dist/routes/chunk-wt8cxzmf.js +31 -0
- package/app-dist/routes/chunk-x45d372k.js +5 -0
- package/app-dist/routes/chunk-y3wsazkt.js +1 -0
- package/app-dist/routes/chunk-y7pmgc7t.js +33 -0
- package/app-dist/routes/chunk-zefdt2q3.js +31 -0
- package/app-dist/routes/dropdowns.js +6 -0
- package/app-dist/routes/home.js +1 -0
- package/app-dist/routes/icons.js +1 -0
- package/app-dist/routes/inputs.js +12 -0
- package/app-dist/routes/installation.js +1 -0
- package/app-dist/routes/layout.js +1 -0
- package/app-dist/routes/modals.js +7 -0
- package/app-dist/routes/navbar.js +1 -0
- package/app-dist/routes/progress.js +1 -0
- package/app-dist/routes/radios.js +6 -0
- package/app-dist/routes/switches.js +6 -0
- package/app-dist/routes/tabs.js +1 -0
- package/app-dist/routes/toasts.js +16 -0
- package/assets/fonts/material-symbols-mini.woff2 +0 -0
- package/assets/fonts/material-symbols.woff2 +0 -0
- package/assets/fonts/roboto-400.woff2 +0 -0
- package/assets/fonts/roboto-500.woff2 +0 -0
- package/assets/fonts/roboto-700.woff2 +0 -0
- package/assets/logo-banner-400.jpg +0 -0
- package/assets/logo-banner-400.webp +0 -0
- package/assets/logo-banner-800.webp +0 -0
- package/assets/logo-banner.jpg +0 -0
- package/assets/logo-icon-64.jpg +0 -0
- package/assets/logo-icon-64.webp +0 -0
- package/assets/logo-icon.jpg +0 -0
- package/assets/logo-square.jpg +0 -0
- package/bun.lock +312 -0
- package/bunfig.toml +4 -0
- package/custom-elements.json +1916 -0
- package/demo/api/sample-data.json +38 -0
- package/demo/content/alerts.html +115 -0
- package/demo/content/avatars.html +70 -0
- package/demo/content/badges.html +65 -0
- package/demo/content/buttons.html +188 -0
- package/demo/content/callouts.html +91 -0
- package/demo/content/cards.html +121 -0
- package/demo/content/checkboxes.html +178 -0
- package/demo/content/chips.html +67 -0
- package/demo/content/codeblocks.html +101 -0
- package/demo/content/confirms.html +115 -0
- package/demo/content/datatables.html +149 -0
- package/demo/content/dividers.html +119 -0
- package/demo/content/dropdowns.html +89 -0
- package/demo/content/enterprise.html +252 -0
- package/demo/content/home.html +149 -0
- package/demo/content/icons.html +89 -0
- package/demo/content/inputs.html +135 -0
- package/demo/content/installation.html +16 -0
- package/demo/content/layout.html +136 -0
- package/demo/content/modals.html +141 -0
- package/demo/content/navbar.html +70 -0
- package/demo/content/progress.html +119 -0
- package/demo/content/radios.html +88 -0
- package/demo/content/skeletons.html +109 -0
- package/demo/content/spinners.html +96 -0
- package/demo/content/switches.html +84 -0
- package/demo/content/tables.html +124 -0
- package/demo/content/tabs.html +85 -0
- package/demo/content/toasts.html +116 -0
- package/demo/content/tooltips.html +107 -0
- package/demo/content/virtual-lists.html +233 -0
- package/demo/favicon.ico +0 -0
- package/demo/favicon.png +0 -0
- package/demo/full.html +52 -0
- package/demo/iife.html +46 -0
- package/demo/manifest.json +34 -0
- package/demo/pages/datatable-demo.html +237 -0
- package/demo/pages/prompt-ui-demo.html +218 -0
- package/demo/pages/responsive-demo.html +122 -0
- package/demo/pages/schema-form-demo.html +270 -0
- package/demo/robots.txt +6 -0
- package/demo/shell.html +712 -0
- package/demo/sw.js +387 -0
- package/dist/AGENTS.md +2366 -0
- package/dist/README.md +254 -0
- package/dist/chunks/advanced.js +174 -0
- package/dist/chunks/chunk-1nhr1wrq.js +14 -0
- package/dist/chunks/chunk-hssyjbr0.js +2 -0
- package/dist/chunks/chunk-k8etzx0z.js +2 -0
- package/dist/chunks/chunk-rr1et8fg.js +2 -0
- package/dist/chunks/chunk-sjcx4fd5.js +6 -0
- package/dist/chunks/chunk-v1c777xh.js +5 -0
- package/dist/chunks/chunk-w5k5vwjd.js +13 -0
- package/dist/chunks/core.js +10 -0
- package/dist/chunks/display.js +17 -0
- package/dist/chunks/feedback.js +15 -0
- package/dist/chunks/forms.js +48 -0
- package/dist/chunks/layout.js +9 -0
- package/dist/components/chunk-4tezav8r.js +2 -0
- package/dist/components/chunk-fqyb2pms.js +2 -0
- package/dist/components/chunk-h7cdbhxw.js +13 -0
- package/dist/components/chunk-mzd8jwrs.js +2 -0
- package/dist/components/chunk-qwmxyn8e.js +2 -0
- package/dist/components/chunk-redtk47a.js +14 -0
- package/dist/components/mu-alert.js +5 -0
- package/dist/components/mu-api-table.js +33 -0
- package/dist/components/mu-avatar.js +1 -0
- package/dist/components/mu-badge.js +1 -0
- package/dist/components/mu-bottom-nav.js +1 -0
- package/dist/components/mu-button.js +1 -0
- package/dist/components/mu-callout.js +1 -0
- package/dist/components/mu-card.js +1 -0
- package/dist/components/mu-checkbox.js +9 -0
- package/dist/components/mu-chip.js +4 -0
- package/dist/components/mu-code.js +48 -0
- package/dist/components/mu-confirm.js +10 -0
- package/dist/components/mu-container.js +1 -0
- package/dist/components/mu-datatable.js +96 -0
- package/dist/components/mu-divider.js +1 -0
- package/dist/components/mu-doc-page.js +26 -0
- package/dist/components/mu-drawer-item.js +9 -0
- package/dist/components/mu-drawer.js +1 -0
- package/dist/components/mu-dropdown.js +6 -0
- package/dist/components/mu-error-boundary.js +10 -0
- package/dist/components/mu-example.js +38 -0
- package/dist/components/mu-fetch.js +1 -0
- package/dist/components/mu-form.js +1 -0
- package/dist/components/mu-grid.js +1 -0
- package/dist/components/mu-icon.js +5 -0
- package/dist/components/mu-input.js +12 -0
- package/dist/components/mu-layout.js +1 -0
- package/dist/components/mu-lazy.js +1 -0
- package/dist/components/mu-modal.js +7 -0
- package/dist/components/mu-navbar.js +1 -0
- package/dist/components/mu-page.js +1 -0
- package/dist/components/mu-progress.js +1 -0
- package/dist/components/mu-prompt-ui.js +20 -0
- package/dist/components/mu-radio.js +6 -0
- package/dist/components/mu-repeat.js +1 -0
- package/dist/components/mu-router.js +6 -0
- package/dist/components/mu-schema-form.js +76 -0
- package/dist/components/mu-sidebar.js +1 -0
- package/dist/components/mu-skeleton.js +13 -0
- package/dist/components/mu-spinner.js +1 -0
- package/dist/components/mu-stack.js +1 -0
- package/dist/components/mu-switch.js +6 -0
- package/dist/components/mu-table.js +1 -0
- package/dist/components/mu-tabs.js +1 -0
- package/dist/components/mu-textarea.js +11 -0
- package/dist/components/mu-theme-toggle.js +5 -0
- package/dist/components/mu-toast.js +4 -0
- package/dist/components/mu-tooltip.js +10 -0
- package/dist/components/mu-virtual-list.js +33 -0
- package/dist/components.css +1 -0
- package/dist/microui.css +1 -0
- package/dist/microui.d.ts +234 -0
- package/dist/microui.esm.js +549 -0
- package/dist/microui.esm.js.map +79 -0
- package/dist/microui.min.js +549 -0
- package/dist/microui.min.js.map +79 -0
- package/dist/routes/alerts.js +1 -0
- package/dist/routes/avatars.js +1 -0
- package/dist/routes/badges.js +1 -0
- package/dist/routes/buttons.js +1 -0
- package/dist/routes/callouts.js +1 -0
- package/dist/routes/cards.js +1 -0
- package/dist/routes/checkboxes.js +9 -0
- package/dist/routes/chips.js +4 -0
- package/dist/routes/chunk-19wgcncm.js +2 -0
- package/dist/routes/chunk-1khyr3v1.js +33 -0
- package/dist/routes/chunk-4rhxe97g.js +1 -0
- package/dist/routes/chunk-5qah04bh.js +2 -0
- package/dist/routes/chunk-7gfxy70n.js +5 -0
- package/dist/routes/chunk-e86zbeta.js +1 -0
- package/dist/routes/chunk-fagt36h6.js +2 -0
- package/dist/routes/chunk-fed7zr7m.js +1 -0
- package/dist/routes/chunk-hwj7pfwp.js +1 -0
- package/dist/routes/chunk-mhvcs2f8.js +5 -0
- package/dist/routes/chunk-nv3bddmj.js +13 -0
- package/dist/routes/chunk-q3f2aeqe.js +7 -0
- package/dist/routes/chunk-qxxa8trk.js +1 -0
- package/dist/routes/chunk-rw15y9zh.js +1 -0
- package/dist/routes/chunk-sfb7x11v.js +5 -0
- package/dist/routes/chunk-swyhghrm.js +48 -0
- package/dist/routes/chunk-sxddjs2d.js +2 -0
- package/dist/routes/chunk-vby0zg5w.js +17 -0
- package/dist/routes/chunk-w6zqjqqs.js +9 -0
- package/dist/routes/chunk-z960rexd.js +38 -0
- package/dist/routes/codeblocks.js +1 -0
- package/dist/routes/confirms.js +10 -0
- package/dist/routes/datatables.js +96 -0
- package/dist/routes/dividers.js +1 -0
- package/dist/routes/dropdowns.js +6 -0
- package/dist/routes/enterprise.js +15 -0
- package/dist/routes/home.js +1 -0
- package/dist/routes/icons.js +1 -0
- package/dist/routes/inputs.js +22 -0
- package/dist/routes/installation.js +1 -0
- package/dist/routes/layout.js +1 -0
- package/dist/routes/modals.js +1 -0
- package/dist/routes/navbar.js +1 -0
- package/dist/routes/page-components.json +316 -0
- package/dist/routes/progress.js +1 -0
- package/dist/routes/radios.js +6 -0
- package/dist/routes/route-deps.json +156 -0
- package/dist/routes/shell-critical.js +1 -0
- package/dist/routes/shell-deferred.js +1 -0
- package/dist/routes/shell.js +20 -0
- package/dist/routes/skeletons.js +13 -0
- package/dist/routes/spinners.js +1 -0
- package/dist/routes/src/chunks/core.js +36 -0
- package/dist/routes/switches.js +6 -0
- package/dist/routes/tables.js +1 -0
- package/dist/routes/tabs.js +1 -0
- package/dist/routes/toasts.js +1 -0
- package/dist/routes/tooltips.js +10 -0
- package/dist/routes/virtual-lists.js +33 -0
- package/dist/styles/common.css +1 -0
- package/dist/styles/components/animations.css +1 -0
- package/dist/styles/components/avatar.css +1 -0
- package/dist/styles/components/badge.css +1 -0
- package/dist/styles/components/bottom-nav.css +1 -0
- package/dist/styles/components/button.css +1 -0
- package/dist/styles/components/card.css +1 -0
- package/dist/styles/components/checkbox.css +1 -0
- package/dist/styles/components/chip.css +1 -0
- package/dist/styles/components/datatable.css +1 -0
- package/dist/styles/components/divider.css +1 -0
- package/dist/styles/components/drawer-item.css +1 -0
- package/dist/styles/components/drawer.css +1 -0
- package/dist/styles/components/grid.css +1 -0
- package/dist/styles/components/icon.css +1 -0
- package/dist/styles/components/input.css +1 -0
- package/dist/styles/components/layout.css +1 -0
- package/dist/styles/components/navbar.css +1 -0
- package/dist/styles/components/overlays.css +1 -0
- package/dist/styles/components/progress.css +1 -0
- package/dist/styles/components/prompt-ui.css +1 -0
- package/dist/styles/components/radio.css +1 -0
- package/dist/styles/components/schema-form.css +1 -0
- package/dist/styles/components/switch.css +1 -0
- package/dist/styles/components/tabs.css +1 -0
- package/dist/styles/components/tooltip.css +1 -0
- package/dist/styles/components/virtual-list.css +1 -0
- package/dist/tokens.css +1 -0
- package/docs/api-reference.md +175 -0
- package/docs/component-schema.md +231 -0
- package/docs/components.md +269 -0
- package/docs/design-system.md +183 -0
- package/docs/getting-started.md +198 -0
- package/docs/message-protocol.md +262 -0
- package/docs/utility-classes.md +205 -0
- package/lighthouse-audit.mjs +113 -0
- package/package.json +45 -0
- package/scripts/analyze-components.js +105 -0
- package/scripts/build-app.js +193 -0
- package/scripts/build-framework.js +444 -0
- package/scripts/build-utils.js +101 -0
- package/scripts/test-isolated.js +151 -0
- package/server.js +256 -0
- package/src/chunks/advanced.js +27 -0
- package/src/chunks/core.js +61 -0
- package/src/chunks/display.js +25 -0
- package/src/chunks/feedback.js +15 -0
- package/src/chunks/forms.js +25 -0
- package/src/chunks/layout.js +27 -0
- package/src/components/mu-alert.js +96 -0
- package/src/components/mu-api-table.js +167 -0
- package/src/components/mu-avatar.js +94 -0
- package/src/components/mu-badge.js +32 -0
- package/src/components/mu-bottom-nav.js +115 -0
- package/src/components/mu-button.js +61 -0
- package/src/components/mu-callout.js +71 -0
- package/src/components/mu-card.js +36 -0
- package/src/components/mu-checkbox.js +186 -0
- package/src/components/mu-chip.js +125 -0
- package/src/components/mu-code.js +534 -0
- package/src/components/mu-confirm.js +268 -0
- package/src/components/mu-container.js +53 -0
- package/src/components/mu-datatable.js +517 -0
- package/src/components/mu-divider.js +40 -0
- package/src/components/mu-doc-page.js +100 -0
- package/src/components/mu-drawer-item.js +158 -0
- package/src/components/mu-drawer.js +305 -0
- package/src/components/mu-dropdown.js +239 -0
- package/src/components/mu-error-boundary.js +191 -0
- package/src/components/mu-example.js +335 -0
- package/src/components/mu-fetch.js +256 -0
- package/src/components/mu-form.js +133 -0
- package/src/components/mu-grid.js +63 -0
- package/src/components/mu-icon.js +211 -0
- package/src/components/mu-input.js +142 -0
- package/src/components/mu-layout.js +129 -0
- package/src/components/mu-lazy.js +94 -0
- package/src/components/mu-modal.js +160 -0
- package/src/components/mu-navbar.js +71 -0
- package/src/components/mu-page.js +77 -0
- package/src/components/mu-progress.js +54 -0
- package/src/components/mu-prompt-ui.js +382 -0
- package/src/components/mu-radio.js +200 -0
- package/src/components/mu-repeat.js +135 -0
- package/src/components/mu-router.js +169 -0
- package/src/components/mu-schema-form.js +441 -0
- package/src/components/mu-sidebar.js +81 -0
- package/src/components/mu-skeleton.js +69 -0
- package/src/components/mu-spinner.js +30 -0
- package/src/components/mu-stack.js +59 -0
- package/src/components/mu-switch.js +150 -0
- package/src/components/mu-table.js +80 -0
- package/src/components/mu-tabs.js +112 -0
- package/src/components/mu-textarea.js +96 -0
- package/src/components/mu-theme-toggle.js +52 -0
- package/src/components/mu-toast.js +151 -0
- package/src/components/mu-tooltip.js +182 -0
- package/src/components/mu-virtual-list.js +184 -0
- package/src/core/MuElement.js +562 -0
- package/src/core/agent-api.js +771 -0
- package/src/core/breakpoints.js +195 -0
- package/src/core/bus.js +378 -0
- package/src/core/component-schema.js +287 -0
- package/src/core/feature-registry.js +241 -0
- package/src/core/form-state.js +252 -0
- package/src/core/http.js +104 -0
- package/src/core/keyboard.js +105 -0
- package/src/core/layers.js +71 -0
- package/src/core/render.js +201 -0
- package/src/core/ripple.js +158 -0
- package/src/core/router.js +100 -0
- package/src/core/scheduler.js +109 -0
- package/src/core/signals.js +164 -0
- package/src/core/store.js +268 -0
- package/src/core/theme.js +68 -0
- package/src/core/transitions.js +72 -0
- package/src/core/utils.js +30 -0
- package/src/index.d.ts +234 -0
- package/src/index.js +308 -0
- package/src/styles/animations.css +252 -0
- package/src/styles/common.css +82 -0
- package/src/styles/components/animations.css +129 -0
- package/src/styles/components/avatar.css +83 -0
- package/src/styles/components/badge.css +80 -0
- package/src/styles/components/bottom-nav.css +37 -0
- package/src/styles/components/button.css +348 -0
- package/src/styles/components/card.css +138 -0
- package/src/styles/components/checkbox.css +201 -0
- package/src/styles/components/chip.css +93 -0
- package/src/styles/components/datatable.css +180 -0
- package/src/styles/components/divider.css +49 -0
- package/src/styles/components/drawer-item.css +123 -0
- package/src/styles/components/drawer.css +273 -0
- package/src/styles/components/grid.css +189 -0
- package/src/styles/components/icon.css +40 -0
- package/src/styles/components/input.css +203 -0
- package/src/styles/components/layout.css +121 -0
- package/src/styles/components/navbar.css +91 -0
- package/src/styles/components/overlays.css +329 -0
- package/src/styles/components/progress.css +79 -0
- package/src/styles/components/prompt-ui.css +286 -0
- package/src/styles/components/radio.css +17 -0
- package/src/styles/components/schema-form.css +85 -0
- package/src/styles/components/switch.css +69 -0
- package/src/styles/components/tabs.css +145 -0
- package/src/styles/components/tooltip.css +93 -0
- package/src/styles/components/virtual-list.css +36 -0
- package/src/styles/components.css +3677 -0
- package/src/styles/routes/home.css +97 -0
- package/src/styles/tokens.css +675 -0
- package/tests/agents/agent-integration.test.js +76 -0
- package/tests/benchmark.html +296 -0
- package/tests/build/scan-components.test.js +173 -0
- package/tests/components/all-components.test.js +245 -0
- package/tests/components/all-missing-components.test.js +574 -0
- package/tests/components/mu-alert.test.js +113 -0
- package/tests/components/mu-avatar.test.js +148 -0
- package/tests/components/mu-badge.test.js +92 -0
- package/tests/components/mu-button.test.js +112 -0
- package/tests/components/mu-card.test.js +89 -0
- package/tests/components/mu-checkbox.test.js +158 -0
- package/tests/components/mu-chip.test.js +118 -0
- package/tests/components/mu-container.test.js +120 -0
- package/tests/components/mu-divider.test.js +98 -0
- package/tests/components/mu-drawer-item.test.js +199 -0
- package/tests/components/mu-drawer.test.js +96 -0
- package/tests/components/mu-dropdown.test.js +125 -0
- package/tests/components/mu-form.test.js +138 -0
- package/tests/components/mu-grid.test.js +135 -0
- package/tests/components/mu-icon.test.js +110 -0
- package/tests/components/mu-input.test.js +131 -0
- package/tests/components/mu-lazy.test.js +103 -0
- package/tests/components/mu-modal.test.js +275 -0
- package/tests/components/mu-navbar.test.js +101 -0
- package/tests/components/mu-progress.test.js +115 -0
- package/tests/components/mu-radio.test.js +114 -0
- package/tests/components/mu-repeat.test.js +106 -0
- package/tests/components/mu-sidebar.test.js +126 -0
- package/tests/components/mu-skeleton.test.js +162 -0
- package/tests/components/mu-stack.test.js +143 -0
- package/tests/components/mu-switch.test.js +292 -0
- package/tests/components/mu-table.test.js +124 -0
- package/tests/components/mu-tabs.test.js +104 -0
- package/tests/components/mu-textarea.test.js +115 -0
- package/tests/components/mu-toast.test.js +321 -0
- package/tests/components/mu-tooltip.test.js +133 -0
- package/tests/components/mu-virtual-list.test.js +109 -0
- package/tests/core/MuElement.test.js +120 -0
- package/tests/core/agent-api.test.js +125 -0
- package/tests/core/all-core-modules.test.js +442 -0
- package/tests/core/bus.test.js +364 -0
- package/tests/core/component-schema.test.js +160 -0
- package/tests/core/feature-registry.test.js +198 -0
- package/tests/core/form-state.test.js +167 -0
- package/tests/core/http.test.js +119 -0
- package/tests/core/keyboard.test.js +319 -0
- package/tests/core/layers.test.js +129 -0
- package/tests/core/namespaced-stores.test.js +114 -0
- package/tests/core/render.test.js +121 -0
- package/tests/core/ripple.test.js +131 -0
- package/tests/core/router.test.js +89 -0
- package/tests/core/scheduler.test.js +121 -0
- package/tests/core/signals.test.js +128 -0
- package/tests/core/store.test.js +171 -0
- package/tests/core/transitions.test.js +82 -0
- package/tests/e2e/accessibility-harness.html +58 -0
- package/tests/e2e/accessibility.test.js +401 -0
- package/tests/e2e/agent-features.test.js +372 -0
- package/tests/e2e/card-spacing.test.js +287 -0
- package/tests/e2e/components.test.js +439 -0
- package/tests/e2e/demo-routes.test.js +478 -0
- package/tests/e2e/layout-css-fallback.test.js +334 -0
- package/tests/e2e/mu-alert.e2e.test.js +111 -0
- package/tests/e2e/mu-checkbox.test.js +489 -0
- package/tests/e2e/mu-chip.test.js +347 -0
- package/tests/e2e/mu-form.test.js +499 -0
- package/tests/e2e/mu-icon.test.js +114 -0
- package/tests/e2e/mu-radio.test.js +113 -0
- package/tests/e2e/mu-skeleton.test.js +140 -0
- package/tests/e2e/mu-switch.test.js +415 -0
- package/tests/e2e/mu-tabs.test.js +494 -0
- package/tests/e2e/mu-textarea.test.js +242 -0
- package/tests/e2e/mu-virtual-list.test.js +427 -0
- package/tests/e2e/perf-memory.test.js +161 -0
- package/tests/e2e/puppeteer-helper.js +137 -0
- package/tests/e2e/puppeteer.test.js +226 -0
- package/tests/e2e/pwa.test.js +261 -0
- package/tests/e2e/test-harness.html +319 -0
- package/tests/manual/test-components.html +120 -0
- package/tests/memory-test.html +309 -0
- package/tests/setup-dom.js +93 -0
- package/tests/visual-test.html +301 -0
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview Unit Tests for transitions.js Module
|
|
3
|
+
* Target: 58% → 90% coverage
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
|
|
7
|
+
import { parseHTML } from 'linkedom';
|
|
8
|
+
|
|
9
|
+
let supportsViewTransitions, transition, transitionNamed, navigateWithTransition;
|
|
10
|
+
|
|
11
|
+
describe('transitions Module Unit Tests', () => {
|
|
12
|
+
|
|
13
|
+
beforeAll(async () => {
|
|
14
|
+
const dom = parseHTML('<!DOCTYPE html><html><head></head><body></body></html>');
|
|
15
|
+
globalThis.document = dom.document;
|
|
16
|
+
globalThis.window = dom.window;
|
|
17
|
+
|
|
18
|
+
// Mock history
|
|
19
|
+
globalThis.window.history = {
|
|
20
|
+
pushState: () => { }
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const module = await import('../../src/core/transitions.js');
|
|
24
|
+
supportsViewTransitions = module.supportsViewTransitions;
|
|
25
|
+
transition = module.transition;
|
|
26
|
+
transitionNamed = module.transitionNamed;
|
|
27
|
+
navigateWithTransition = module.navigateWithTransition;
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
// SUPPORTS VIEW TRANSITIONS
|
|
31
|
+
test('supportsViewTransitions should be boolean', () => {
|
|
32
|
+
expect(typeof supportsViewTransitions).toBe('boolean');
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
// TRANSITION
|
|
36
|
+
test('transition should be a function', () => {
|
|
37
|
+
expect(typeof transition).toBe('function');
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
test('transition should call callback (fallback)', async () => {
|
|
41
|
+
let called = false;
|
|
42
|
+
await transition(() => { called = true; });
|
|
43
|
+
expect(called).toBe(true);
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
test('transition should handle async callback', async () => {
|
|
47
|
+
let called = false;
|
|
48
|
+
await transition(async () => {
|
|
49
|
+
await Promise.resolve();
|
|
50
|
+
called = true;
|
|
51
|
+
});
|
|
52
|
+
expect(called).toBe(true);
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
// TRANSITION NAMED
|
|
56
|
+
test('transitionNamed should be a function', () => {
|
|
57
|
+
expect(typeof transitionNamed).toBe('function');
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
test('transitionNamed should call callback (fallback)', async () => {
|
|
61
|
+
let called = false;
|
|
62
|
+
await transitionNamed(() => { called = true; });
|
|
63
|
+
expect(called).toBe(true);
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
test('transitionNamed should accept name option', async () => {
|
|
67
|
+
let called = false;
|
|
68
|
+
await transitionNamed(() => { called = true; }, { name: 'custom' });
|
|
69
|
+
expect(called).toBe(true);
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
// NAVIGATE WITH TRANSITION
|
|
73
|
+
test('navigateWithTransition should be a function', () => {
|
|
74
|
+
expect(typeof navigateWithTransition).toBe('function');
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
test('navigateWithTransition should call render', async () => {
|
|
78
|
+
let rendered = false;
|
|
79
|
+
await navigateWithTransition('/test', () => { rendered = true; });
|
|
80
|
+
expect(rendered).toBe(true);
|
|
81
|
+
});
|
|
82
|
+
});
|
|
@@ -0,0 +1,58 @@
|
|
|
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>Accessibility Test Harness</title>
|
|
8
|
+
<link rel="stylesheet" href="/src/styles/tokens.css">
|
|
9
|
+
<link rel="stylesheet" href="/src/styles/components.css">
|
|
10
|
+
<script type="importmap">
|
|
11
|
+
{
|
|
12
|
+
"imports": {
|
|
13
|
+
"signalbus": "/node_modules/signalbus/dist/signalbus.js"
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
<!-- Use dist bundle for now; will rebuild with fix -->
|
|
18
|
+
<script src="/dist/microui.min.js"></script>
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body>
|
|
22
|
+
<!-- Form Components for Testing -->
|
|
23
|
+
<mu-input id="test-input" label="Test Input"></mu-input>
|
|
24
|
+
<mu-input id="test-input-no-label" placeholder="Placeholder only"></mu-input>
|
|
25
|
+
<mu-textarea id="test-textarea" placeholder="Test textarea"></mu-textarea>
|
|
26
|
+
|
|
27
|
+
<mu-checkbox id="test-checkbox">Test Checkbox</mu-checkbox>
|
|
28
|
+
<mu-checkbox id="test-checkbox-checked" checked>Checked Checkbox</mu-checkbox>
|
|
29
|
+
<mu-checkbox id="test-checkbox-disabled" disabled>Disabled Checkbox</mu-checkbox>
|
|
30
|
+
<mu-checkbox id="test-checkbox-indeterminate" indeterminate>Indeterminate</mu-checkbox>
|
|
31
|
+
|
|
32
|
+
<mu-switch id="test-switch" label="Test Switch"></mu-switch>
|
|
33
|
+
<mu-switch id="test-switch-checked" label="Checked Switch" checked></mu-switch>
|
|
34
|
+
<mu-switch id="test-switch-disabled" label="Disabled Switch" disabled></mu-switch>
|
|
35
|
+
|
|
36
|
+
<mu-radio-group id="test-radio-group" name="test" value="a">
|
|
37
|
+
<mu-radio id="test-radio-a" value="a">Option A</mu-radio>
|
|
38
|
+
<mu-radio id="test-radio-b" value="b">Option B</mu-radio>
|
|
39
|
+
<mu-radio id="test-radio-disabled" value="c" disabled>Disabled Option</mu-radio>
|
|
40
|
+
</mu-radio-group>
|
|
41
|
+
|
|
42
|
+
<mu-dropdown id="test-dropdown" placeholder="Select option">
|
|
43
|
+
<mu-option value="1">Option 1</mu-option>
|
|
44
|
+
<mu-option value="2">Option 2</mu-option>
|
|
45
|
+
</mu-dropdown>
|
|
46
|
+
|
|
47
|
+
<mu-button id="test-button">Test Button</mu-button>
|
|
48
|
+
<mu-button id="test-button-disabled" disabled>Disabled Button</mu-button>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
// Signal test completion after components are ready
|
|
52
|
+
setTimeout(() => {
|
|
53
|
+
window.testReady = true;
|
|
54
|
+
}, 500);
|
|
55
|
+
</script>
|
|
56
|
+
</body>
|
|
57
|
+
|
|
58
|
+
</html>
|
|
@@ -0,0 +1,401 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fileoverview E2E Accessibility Tests for microUI Components
|
|
3
|
+
*
|
|
4
|
+
* These tests verify ARIA compliance to ensure accessibility requirements
|
|
5
|
+
* are maintained across all form and interactive components.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
|
|
9
|
+
import { launchBrowser, puppeteer } from './puppeteer-helper.js';
|
|
10
|
+
import { fileURLToPath } from 'url';
|
|
11
|
+
import { dirname, join } from 'path';
|
|
12
|
+
|
|
13
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
14
|
+
const __dirname = dirname(__filename);
|
|
15
|
+
|
|
16
|
+
describe('Accessibility E2E Tests', () => {
|
|
17
|
+
let browser;
|
|
18
|
+
let page;
|
|
19
|
+
let server;
|
|
20
|
+
|
|
21
|
+
beforeAll(async () => {
|
|
22
|
+
const projectRoot = join(__dirname, '../..');
|
|
23
|
+
|
|
24
|
+
server = Bun.serve({
|
|
25
|
+
port: 0,
|
|
26
|
+
async fetch(req) {
|
|
27
|
+
const url = new URL(req.url);
|
|
28
|
+
let filePath = join(projectRoot, url.pathname);
|
|
29
|
+
|
|
30
|
+
// Default to accessibility test harness
|
|
31
|
+
if (url.pathname === '/') {
|
|
32
|
+
filePath = join(__dirname, 'accessibility-harness.html');
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
try {
|
|
36
|
+
const file = Bun.file(filePath);
|
|
37
|
+
const exists = await file.exists();
|
|
38
|
+
if (!exists) {
|
|
39
|
+
return new Response('Not Found', { status: 404 });
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const content = await file.text();
|
|
43
|
+
const ext = filePath.split('.').pop();
|
|
44
|
+
const mimeTypes = {
|
|
45
|
+
'html': 'text/html',
|
|
46
|
+
'js': 'text/javascript',
|
|
47
|
+
'css': 'text/css',
|
|
48
|
+
'png': 'image/png',
|
|
49
|
+
'ico': 'image/x-icon'
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
return new Response(content, {
|
|
53
|
+
headers: { 'Content-Type': mimeTypes[ext] || 'text/plain' }
|
|
54
|
+
});
|
|
55
|
+
} catch (e) {
|
|
56
|
+
return new Response('Error: ' + e.message, { status: 500 });
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
browser = await launchBrowser({ testName: 'accessibility' });
|
|
62
|
+
page = await browser.newPage();
|
|
63
|
+
|
|
64
|
+
// Enable console logging for debugging
|
|
65
|
+
page.on('console', msg => console.log('BROWSER:', msg.text()));
|
|
66
|
+
page.on('pageerror', err => console.error('PAGE ERROR:', err.message));
|
|
67
|
+
|
|
68
|
+
await page.goto(`http://localhost:${server.port}`, { waitUntil: 'domcontentloaded' });
|
|
69
|
+
|
|
70
|
+
// Wait for components to be ready with fallback
|
|
71
|
+
try {
|
|
72
|
+
await page.waitForFunction(() => window.testReady === true, { timeout: 15000 });
|
|
73
|
+
} catch (e) {
|
|
74
|
+
console.log('Timeout waiting for testReady, checking page state...');
|
|
75
|
+
const hasTestReady = await page.evaluate(() => window.testReady);
|
|
76
|
+
console.log('testReady:', hasTestReady);
|
|
77
|
+
|
|
78
|
+
// Check if components loaded
|
|
79
|
+
const hasCheckbox = await page.evaluate(() => !!document.querySelector('mu-checkbox'));
|
|
80
|
+
console.log('Has mu-checkbox:', hasCheckbox);
|
|
81
|
+
|
|
82
|
+
if (!hasCheckbox) {
|
|
83
|
+
throw new Error('Components failed to load');
|
|
84
|
+
}
|
|
85
|
+
// If components exist, continue anyway
|
|
86
|
+
}
|
|
87
|
+
}, 60000);
|
|
88
|
+
|
|
89
|
+
afterAll(async () => {
|
|
90
|
+
if (browser) await browser.close();
|
|
91
|
+
if (server) server.stop();
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// ==========================================
|
|
95
|
+
// mu-input Tests
|
|
96
|
+
// ==========================================
|
|
97
|
+
describe('mu-input Accessibility', () => {
|
|
98
|
+
test('input with label should have associated label element', async () => {
|
|
99
|
+
const result = await page.evaluate(() => {
|
|
100
|
+
const input = document.querySelector('#test-input');
|
|
101
|
+
const label = input.querySelector('label');
|
|
102
|
+
const inputField = input.querySelector('input');
|
|
103
|
+
return {
|
|
104
|
+
hasLabel: !!label,
|
|
105
|
+
isAssociated: label?.getAttribute('for') === inputField?.id
|
|
106
|
+
};
|
|
107
|
+
});
|
|
108
|
+
expect(result.hasLabel).toBe(true);
|
|
109
|
+
expect(result.isAssociated).toBe(true);
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
test('input with placeholder (no label) should use placeholder as visible label', async () => {
|
|
113
|
+
const result = await page.evaluate(() => {
|
|
114
|
+
const input = document.querySelector('#test-input-no-label');
|
|
115
|
+
const inputField = input.querySelector('input');
|
|
116
|
+
const label = input.querySelector('label');
|
|
117
|
+
// Either has aria-label OR has associated visible label
|
|
118
|
+
const hasAriaLabel = inputField?.getAttribute('aria-label');
|
|
119
|
+
const hasVisibleLabel = label && label.getAttribute('for') === inputField?.id;
|
|
120
|
+
return { hasAriaLabel: !!hasAriaLabel, hasVisibleLabel, isAccessible: !!(hasAriaLabel || hasVisibleLabel) };
|
|
121
|
+
});
|
|
122
|
+
// Should be accessible via visible label (placeholder becomes label text)
|
|
123
|
+
expect(result.isAccessible).toBe(true);
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
// ==========================================
|
|
128
|
+
// mu-textarea Tests
|
|
129
|
+
// ==========================================
|
|
130
|
+
describe('mu-textarea Accessibility', () => {
|
|
131
|
+
test('textarea should have aria-label', async () => {
|
|
132
|
+
const ariaLabel = await page.evaluate(() => {
|
|
133
|
+
const comp = document.querySelector('#test-textarea');
|
|
134
|
+
const textarea = comp.querySelector('textarea');
|
|
135
|
+
return textarea?.getAttribute('aria-label');
|
|
136
|
+
});
|
|
137
|
+
expect(ariaLabel).toBeTruthy();
|
|
138
|
+
});
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
// ==========================================
|
|
142
|
+
// mu-checkbox Tests
|
|
143
|
+
// ==========================================
|
|
144
|
+
describe('mu-checkbox Accessibility', () => {
|
|
145
|
+
test('should have role="checkbox"', async () => {
|
|
146
|
+
const role = await page.evaluate(() =>
|
|
147
|
+
document.querySelector('#test-checkbox')?.getAttribute('role')
|
|
148
|
+
);
|
|
149
|
+
expect(role).toBe('checkbox');
|
|
150
|
+
});
|
|
151
|
+
|
|
152
|
+
test('should have aria-checked="false" when unchecked', async () => {
|
|
153
|
+
const ariaChecked = await page.evaluate(() =>
|
|
154
|
+
document.querySelector('#test-checkbox')?.getAttribute('aria-checked')
|
|
155
|
+
);
|
|
156
|
+
expect(ariaChecked).toBe('false');
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
test('should have aria-checked="true" when checked', async () => {
|
|
160
|
+
const ariaChecked = await page.evaluate(() =>
|
|
161
|
+
document.querySelector('#test-checkbox-checked')?.getAttribute('aria-checked')
|
|
162
|
+
);
|
|
163
|
+
expect(ariaChecked).toBe('true');
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
test('should have aria-checked="mixed" when indeterminate', async () => {
|
|
167
|
+
const ariaChecked = await page.evaluate(() =>
|
|
168
|
+
document.querySelector('#test-checkbox-indeterminate')?.getAttribute('aria-checked')
|
|
169
|
+
);
|
|
170
|
+
expect(ariaChecked).toBe('mixed');
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
test('should have aria-disabled="true" when disabled', async () => {
|
|
174
|
+
const ariaDisabled = await page.evaluate(() =>
|
|
175
|
+
document.querySelector('#test-checkbox-disabled')?.getAttribute('aria-disabled')
|
|
176
|
+
);
|
|
177
|
+
expect(ariaDisabled).toBe('true');
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
test('should have tabindex="0" when enabled', async () => {
|
|
181
|
+
const tabindex = await page.evaluate(() =>
|
|
182
|
+
document.querySelector('#test-checkbox')?.getAttribute('tabindex')
|
|
183
|
+
);
|
|
184
|
+
expect(tabindex).toBe('0');
|
|
185
|
+
});
|
|
186
|
+
|
|
187
|
+
test('should have tabindex="-1" when disabled', async () => {
|
|
188
|
+
const tabindex = await page.evaluate(() =>
|
|
189
|
+
document.querySelector('#test-checkbox-disabled')?.getAttribute('tabindex')
|
|
190
|
+
);
|
|
191
|
+
expect(tabindex).toBe('-1');
|
|
192
|
+
});
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
// ==========================================
|
|
196
|
+
// mu-switch Tests
|
|
197
|
+
// ==========================================
|
|
198
|
+
describe('mu-switch Accessibility', () => {
|
|
199
|
+
test('should have role="switch"', async () => {
|
|
200
|
+
const role = await page.evaluate(() =>
|
|
201
|
+
document.querySelector('#test-switch')?.getAttribute('role')
|
|
202
|
+
);
|
|
203
|
+
expect(role).toBe('switch');
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
test('should have aria-checked="false" when off', async () => {
|
|
207
|
+
const ariaChecked = await page.evaluate(() =>
|
|
208
|
+
document.querySelector('#test-switch')?.getAttribute('aria-checked')
|
|
209
|
+
);
|
|
210
|
+
expect(ariaChecked).toBe('false');
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
test('should have aria-checked="true" when on', async () => {
|
|
214
|
+
const ariaChecked = await page.evaluate(() =>
|
|
215
|
+
document.querySelector('#test-switch-checked')?.getAttribute('aria-checked')
|
|
216
|
+
);
|
|
217
|
+
expect(ariaChecked).toBe('true');
|
|
218
|
+
});
|
|
219
|
+
|
|
220
|
+
test('should have aria-label from label attribute', async () => {
|
|
221
|
+
const ariaLabel = await page.evaluate(() =>
|
|
222
|
+
document.querySelector('#test-switch')?.getAttribute('aria-label')
|
|
223
|
+
);
|
|
224
|
+
expect(ariaLabel).toBe('Test Switch');
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
test('should have aria-disabled="true" when disabled', async () => {
|
|
228
|
+
const ariaDisabled = await page.evaluate(() =>
|
|
229
|
+
document.querySelector('#test-switch-disabled')?.getAttribute('aria-disabled')
|
|
230
|
+
);
|
|
231
|
+
expect(ariaDisabled).toBe('true');
|
|
232
|
+
});
|
|
233
|
+
|
|
234
|
+
test('should have tabindex="0" when enabled', async () => {
|
|
235
|
+
const tabindex = await page.evaluate(() =>
|
|
236
|
+
document.querySelector('#test-switch')?.getAttribute('tabindex')
|
|
237
|
+
);
|
|
238
|
+
expect(tabindex).toBe('0');
|
|
239
|
+
});
|
|
240
|
+
});
|
|
241
|
+
|
|
242
|
+
// ==========================================
|
|
243
|
+
// mu-radio Tests
|
|
244
|
+
// ==========================================
|
|
245
|
+
describe('mu-radio Accessibility', () => {
|
|
246
|
+
test('radio-group should have role="radiogroup"', async () => {
|
|
247
|
+
const role = await page.evaluate(() =>
|
|
248
|
+
document.querySelector('#test-radio-group')?.getAttribute('role')
|
|
249
|
+
);
|
|
250
|
+
expect(role).toBe('radiogroup');
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
test('radio should have role="radio"', async () => {
|
|
254
|
+
const role = await page.evaluate(() =>
|
|
255
|
+
document.querySelector('#test-radio-a')?.getAttribute('role')
|
|
256
|
+
);
|
|
257
|
+
expect(role).toBe('radio');
|
|
258
|
+
});
|
|
259
|
+
|
|
260
|
+
test('selected radio should have aria-checked="true"', async () => {
|
|
261
|
+
const ariaChecked = await page.evaluate(() =>
|
|
262
|
+
document.querySelector('#test-radio-a')?.getAttribute('aria-checked')
|
|
263
|
+
);
|
|
264
|
+
expect(ariaChecked).toBe('true');
|
|
265
|
+
});
|
|
266
|
+
|
|
267
|
+
test('unselected radio should have aria-checked="false"', async () => {
|
|
268
|
+
const ariaChecked = await page.evaluate(() =>
|
|
269
|
+
document.querySelector('#test-radio-b')?.getAttribute('aria-checked')
|
|
270
|
+
);
|
|
271
|
+
expect(ariaChecked).toBe('false');
|
|
272
|
+
});
|
|
273
|
+
|
|
274
|
+
test('disabled radio should have aria-disabled="true"', async () => {
|
|
275
|
+
const ariaDisabled = await page.evaluate(() =>
|
|
276
|
+
document.querySelector('#test-radio-disabled')?.getAttribute('aria-disabled')
|
|
277
|
+
);
|
|
278
|
+
expect(ariaDisabled).toBe('true');
|
|
279
|
+
});
|
|
280
|
+
});
|
|
281
|
+
|
|
282
|
+
// ==========================================
|
|
283
|
+
// mu-dropdown Tests
|
|
284
|
+
// ==========================================
|
|
285
|
+
describe('mu-dropdown Accessibility', () => {
|
|
286
|
+
test('trigger should have aria-haspopup="listbox"', async () => {
|
|
287
|
+
const ariaHasPopup = await page.evaluate(() => {
|
|
288
|
+
const dropdown = document.querySelector('#test-dropdown');
|
|
289
|
+
const trigger = dropdown.querySelector('.mu-dropdown__trigger');
|
|
290
|
+
return trigger?.getAttribute('aria-haspopup');
|
|
291
|
+
});
|
|
292
|
+
expect(ariaHasPopup).toBe('listbox');
|
|
293
|
+
});
|
|
294
|
+
|
|
295
|
+
test('trigger should have aria-expanded="false" when closed', async () => {
|
|
296
|
+
const ariaExpanded = await page.evaluate(() => {
|
|
297
|
+
const dropdown = document.querySelector('#test-dropdown');
|
|
298
|
+
const trigger = dropdown.querySelector('.mu-dropdown__trigger');
|
|
299
|
+
return trigger?.getAttribute('aria-expanded');
|
|
300
|
+
});
|
|
301
|
+
expect(ariaExpanded).toBe('false');
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
test('trigger should have aria-expanded="true" when open', async () => {
|
|
305
|
+
const ariaExpanded = await page.evaluate(() => {
|
|
306
|
+
const dropdown = document.querySelector('#test-dropdown');
|
|
307
|
+
dropdown.open();
|
|
308
|
+
const trigger = dropdown.querySelector('.mu-dropdown__trigger');
|
|
309
|
+
const result = trigger?.getAttribute('aria-expanded');
|
|
310
|
+
dropdown.close();
|
|
311
|
+
return result;
|
|
312
|
+
});
|
|
313
|
+
expect(ariaExpanded).toBe('true');
|
|
314
|
+
});
|
|
315
|
+
|
|
316
|
+
test('trigger should have aria-label', async () => {
|
|
317
|
+
const ariaLabel = await page.evaluate(() => {
|
|
318
|
+
const dropdown = document.querySelector('#test-dropdown');
|
|
319
|
+
const trigger = dropdown.querySelector('.mu-dropdown__trigger');
|
|
320
|
+
return trigger?.getAttribute('aria-label');
|
|
321
|
+
});
|
|
322
|
+
expect(ariaLabel).toBeTruthy();
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
test('menu should have role="listbox"', async () => {
|
|
326
|
+
const role = await page.evaluate(() => {
|
|
327
|
+
const portal = document.querySelector('#mu-dropdown-portal');
|
|
328
|
+
const menu = portal?.querySelector('.mu-dropdown__menu');
|
|
329
|
+
return menu?.getAttribute('role');
|
|
330
|
+
});
|
|
331
|
+
expect(role).toBe('listbox');
|
|
332
|
+
});
|
|
333
|
+
});
|
|
334
|
+
|
|
335
|
+
// ==========================================
|
|
336
|
+
// mu-button Tests
|
|
337
|
+
// ==========================================
|
|
338
|
+
describe('mu-button Accessibility', () => {
|
|
339
|
+
test('should have role="button"', async () => {
|
|
340
|
+
const role = await page.evaluate(() =>
|
|
341
|
+
document.querySelector('#test-button')?.getAttribute('role')
|
|
342
|
+
);
|
|
343
|
+
expect(role).toBe('button');
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
test('should have tabindex="0" when enabled', async () => {
|
|
347
|
+
const tabindex = await page.evaluate(() =>
|
|
348
|
+
document.querySelector('#test-button')?.getAttribute('tabindex')
|
|
349
|
+
);
|
|
350
|
+
expect(tabindex).toBe('0');
|
|
351
|
+
});
|
|
352
|
+
|
|
353
|
+
test('should have tabindex="-1" when disabled', async () => {
|
|
354
|
+
const tabindex = await page.evaluate(() =>
|
|
355
|
+
document.querySelector('#test-button-disabled')?.getAttribute('tabindex')
|
|
356
|
+
);
|
|
357
|
+
expect(tabindex).toBe('-1');
|
|
358
|
+
});
|
|
359
|
+
});
|
|
360
|
+
|
|
361
|
+
// ==========================================
|
|
362
|
+
// Keyboard Navigation Tests
|
|
363
|
+
// ==========================================
|
|
364
|
+
describe('Keyboard Navigation', () => {
|
|
365
|
+
test('checkbox should respond to Space key', async () => {
|
|
366
|
+
const result = await page.evaluate(() => {
|
|
367
|
+
// Reset checkbox first
|
|
368
|
+
const checkbox = document.querySelector('#test-checkbox');
|
|
369
|
+
if (checkbox.hasAttribute('checked')) {
|
|
370
|
+
checkbox.removeAttribute('checked');
|
|
371
|
+
}
|
|
372
|
+
const initialState = checkbox.getAttribute('aria-checked');
|
|
373
|
+
|
|
374
|
+
checkbox.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
|
|
375
|
+
|
|
376
|
+
const newState = checkbox.getAttribute('aria-checked');
|
|
377
|
+
return { initial: initialState, after: newState };
|
|
378
|
+
});
|
|
379
|
+
|
|
380
|
+
expect(result.after).toBe('true');
|
|
381
|
+
});
|
|
382
|
+
|
|
383
|
+
test('switch should respond to Space key', async () => {
|
|
384
|
+
const result = await page.evaluate(() => {
|
|
385
|
+
// Reset switch first
|
|
386
|
+
const sw = document.querySelector('#test-switch');
|
|
387
|
+
if (sw.hasAttribute('checked')) {
|
|
388
|
+
sw.removeAttribute('checked');
|
|
389
|
+
}
|
|
390
|
+
const initialState = sw.getAttribute('aria-checked');
|
|
391
|
+
|
|
392
|
+
sw.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
|
|
393
|
+
|
|
394
|
+
const newState = sw.getAttribute('aria-checked');
|
|
395
|
+
return { initial: initialState, after: newState };
|
|
396
|
+
});
|
|
397
|
+
|
|
398
|
+
expect(result.after).toBe('true');
|
|
399
|
+
});
|
|
400
|
+
});
|
|
401
|
+
});
|