@a11y-hud/svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arthur Vasconcelos
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# @a11y-hud/svelte
+
+Svelte 5 adapter for [a11y-hud](https://github.com/arthurvasconcelos/a11y-hud) — run axe-core accessibility audits in your Svelte app with no DevTools required.
+
+## Install
+
+```sh
+pnpm add @a11y-hud/svelte svelte
+```
+
+## Usage
+
+### Hook (recommended)
+
+Use `useA11yHud` inside any Svelte 5 component. Pass a getter function so that reactive state is read inside the `$effect` that tracks it:
+
+```svelte
+<script lang="ts">
+  import { useA11yHud } from "@a11y-hud/svelte";
+
+  let scopeSection = $state<HTMLDivElement | null>(null);
+
+  useA11yHud(() => ({
+    theme: "dark",
+    scope: scopeSection,
+    autoScan: true,
+    debounce: 300,
+  }));
+</script>
+
+<div bind:this={scopeSection}>
+  <!-- your app content -->
+</div>
+```
+
+The `scope` option accepts `Element | null` (from `bind:this`), consistent with the Vue adapter.
+
+### Component
+
+Use the `<A11yHud>` component when you prefer a declarative approach:
+
+```svelte
+<script lang="ts">
+  import { A11yHud } from "@a11y-hud/svelte";
+
+  let scopeSection = $state<HTMLDivElement | null>(null);
+</script>
+
+<A11yHud scope={scopeSection} theme="dark" />
+
+<div bind:this={scopeSection}>
+  <!-- your app content -->
+</div>
+```
+
+## API
+
+### `useA11yHud(getOptions?: () => UseA11yHudOptions): UseA11yHudReturn`
+
+| Option | Type | Description |
+|---|---|---|
+| `theme` | `Theme` | `"light"`, `"dark"`, or `"high-contrast"` |
+| `scope` | `Element \| null` | Restrict scan to a subtree |
+| `autoScan` | `boolean` | Enable/disable automatic scanning (default: `true`) |
+| `debounce` | `number` | Debounce delay in milliseconds |
+
+Returns `{ runScan(): Promise<AxeResults>, setTheme(theme: Theme): void }`.
+
+### `<A11yHud>` component
+
+Accepts the same options as `UseA11yHudOptions` as props. Renders nothing into the Svelte tree — the `<a11y-hud>` Custom Element is mounted directly on `document.body`.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as A11yHud } from './A11yHud.svelte';
+export { useA11yHud } from './hook.svelte.js';
+export type { A11yHudProps, UseA11yHudOptions, UseA11yHudReturn } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,65 @@
+import "svelte/internal/disclose-version";
+import * as e from "svelte/internal/client";
+import { mount as t } from "a11y-hud";
+import { onDestroy as n, onMount as r } from "svelte";
+//#region src/hook.svelte.ts
+function i(i = () => ({})) {
+	let a = e.state(!1), o = null, s = null;
+	r(() => {
+		let { theme: n, autoScan: r, debounce: c } = i();
+		o = t({
+			...n !== void 0 && { theme: n },
+			...r !== void 0 && { autoScan: r },
+			...c !== void 0 && { debounce: c }
+		}), s = document.querySelector("a11y-hud"), e.set(a, !0);
+	}), n(() => {
+		o?.unmount(), o = null, s = null;
+	}), e.user_effect(() => {
+		if (!e.get(a)) return;
+		let { scope: t } = i(), n = s;
+		n && (n.scopeElement = t ?? void 0, o?.runScan());
+	}), e.user_effect(() => {
+		if (e.get(a)) {
+			let { theme: e } = i();
+			e !== void 0 && o?.setTheme(e);
+		}
+	}), e.user_effect(() => {
+		if (e.get(a)) {
+			let e = s;
+			if (e) {
+				let { autoScan: t } = i();
+				t === !1 ? e.removeAttribute("auto-scan") : e.setAttribute("auto-scan", "");
+			}
+		}
+	}), e.user_effect(() => {
+		if (e.get(a)) {
+			let e = s;
+			if (e) {
+				let { debounce: t } = i();
+				t !== void 0 && e.setAttribute("debounce", String(t));
+			}
+		}
+	});
+	function c() {
+		return o?.runScan() ?? Promise.resolve(null);
+	}
+	function l(e) {
+		o?.setTheme(e);
+	}
+	return {
+		runScan: c,
+		setTheme: l
+	};
+}
+//#endregion
+//#region src/A11yHud.svelte
+function a(t, n) {
+	e.push(n, !0), i(() => ({
+		...n.theme !== void 0 && { theme: n.theme },
+		...n.scope !== void 0 && { scope: n.scope },
+		...n.autoScan !== void 0 && { autoScan: n.autoScan },
+		...n.debounce !== void 0 && { debounce: n.debounce }
+	})), e.pop();
+}
+//#endregion
+export { a as A11yHud, i as useA11yHud };

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import { AxeResults, Theme } from 'a11y-hud';
+export interface UseA11yHudOptions {
+    theme?: Theme;
+    scope?: Element | null;
+    autoScan?: boolean;
+    debounce?: number;
+}
+export type A11yHudProps = UseA11yHudOptions;
+export interface UseA11yHudReturn {
+    runScan(): Promise<AxeResults>;
+    setTheme(theme: Theme): void;
+}
+export declare function useA11yHud(getOptions?: () => UseA11yHudOptions): UseA11yHudReturn;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,UAAU,CAAC,EAAE,MAAM,iBAAiB,GAAG,gBAAgB,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@a11y-hud/svelte",
+  "version": "0.1.0",
+  "description": "Svelte adapter for a11y-hud — run axe-core accessibility audits in your Svelte app with no DevTools required.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "dependencies": {
+    "a11y-hud": "0.1.4"
+  },
+  "peerDependencies": {
+    "svelte": ">=5"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/svelte": "^5.3.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "jsdom": "^29.1.1",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.7",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.5"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/arthurvasconcelos/a11y-hud#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arthurvasconcelos/a11y-hud.git",
+    "directory": "packages/svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/arthurvasconcelos/a11y-hud/issues"
+  },
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "axe",
+    "axe-core",
+    "wcag",
+    "svelte",
+    "svelte5",
+    "dev-tools",
+    "overlay",
+    "hud"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  }
+}