@pigmilcom/a11y 1.0.0 → 1.0.1

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.

Potentially problematic release.

This version of @pigmilcom/a11y might be problematic. Click here for more details.

Files changed (5) hide show
  1. package/README.md +42 -3
  2. package/dist/a11y.cdn.js +270 -0
  3. package/dist/index.css +20 -0
  4. package/package.json +6 -3
  5. package/src/cdn.jsx +77 -0
package/dist/index.css CHANGED
@@ -27,6 +27,10 @@ accessibility class rules that get toggled on <html> by the widget.
27
27
  inset: 0px;
28
28
  }
29
29
 
30
+ .bottom-5 {
31
+ bottom: 1.25rem;
32
+ }
33
+
30
34
  .left-0\.5 {
31
35
  left: 0.125rem;
32
36
  }
@@ -39,10 +43,18 @@ accessibility class rules that get toggled on <html> by the widget.
39
43
  left: 0.875rem;
40
44
  }
41
45
 
46
+ .left-5 {
47
+ left: 1.25rem;
48
+ }
49
+
42
50
  .right-1\.5 {
43
51
  right: 0.375rem;
44
52
  }
45
53
 
54
+ .right-5 {
55
+ right: 1.25rem;
56
+ }
57
+
46
58
  .top-0\.5 {
47
59
  top: 0.125rem;
48
60
  }
@@ -55,6 +67,10 @@ accessibility class rules that get toggled on <html> by the widget.
55
67
  top: 50%;
56
68
  }
57
69
 
70
+ .top-5 {
71
+ top: 1.25rem;
72
+ }
73
+
58
74
  .z-9998 {
59
75
  z-index: 9998;
60
76
  }
@@ -197,6 +213,10 @@ accessibility class rules that get toggled on <html> by the widget.
197
213
  overflow-y: auto;
198
214
  }
199
215
 
216
+ .rounded {
217
+ border-radius: 0.25rem;
218
+ }
219
+
200
220
  .rounded-full {
201
221
  border-radius: 9999px;
202
222
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pigmilcom/a11y",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "WCAG 2.1 accessibility widget for React — text size, contrast, dyslexia font, motion reduction, and more.",
5
5
  "keywords": [
6
6
  "accessibility",
@@ -32,13 +32,16 @@
32
32
  "files": [
33
33
  "dist",
34
34
  "types",
35
- "README.md"
35
+ "README.md",
36
+ "src/cdn.jsx"
36
37
  ],
37
38
  "sideEffects": false,
39
+ "browser": "./dist/a11y.cdn.js",
38
40
  "scripts": {
39
41
  "build:js": "tsup",
40
42
  "build:css": "tailwindcss -i src/a11y.css -o dist/index.css",
41
- "build": "npm run build:js && npm run build:css",
43
+ "build:cdn": "tsup --config tsup.cdn.config.mjs && node -e \"require('fs').unlinkSync('./dist/a11y.cdn.css')\"",
44
+ "build": "npm run build:js && npm run build:css && npm run build:cdn",
42
45
  "dev": "tsup --watch",
43
46
  "prepublishOnly": "npm run build"
44
47
  },
package/src/cdn.jsx ADDED
@@ -0,0 +1,77 @@
1
+ /**
2
+ * @pigmilcom/a11y — CDN / Plug-and-Play entry
3
+ *
4
+ * Drop one script tag anywhere in your HTML — no React, no bundler, no config:
5
+ * <script src="https://cdn.pigmilcom.com/a11y/a11y.cdn.js"></script>
6
+ *
7
+ * Optional data-position attribute on the <script> tag:
8
+ * data-position="bottom-right" (default)
9
+ * data-position="bottom-left"
10
+ * data-position="top-right"
11
+ * data-position="top-left"
12
+ *
13
+ * NOTE: This entry imports ../dist/index.css as an inlined text string.
14
+ * Run "npm run build:js && npm run build:css" before "npm run build:cdn".
15
+ */
16
+
17
+ import { createRoot } from 'react-dom/client';
18
+ import A11yWidget from './widget.jsx';
19
+
20
+ // Inline the pre-built CSS (Tailwind utilities + a11y modifier rules).
21
+ // esbuild treats .css files as raw text via the loader option in tsup.cdn.config.mjs.
22
+ import css from '../dist/index.css';
23
+
24
+ // ── Capture currentScript synchronously (only valid during initial execution) ─
25
+ const _script = document.currentScript;
26
+
27
+ // ── Position map — maps data-position value to Tailwind utility classes ────────
28
+ const POSITIONS = {
29
+ 'bottom-right': 'fixed bottom-5 right-5',
30
+ 'bottom-left': 'fixed bottom-5 left-5',
31
+ 'top-right': 'fixed top-5 right-5',
32
+ 'top-left': 'fixed top-5 left-5',
33
+ };
34
+
35
+ function getWidgetClass() {
36
+ const pos = _script?.dataset?.position ?? 'bottom-right';
37
+ return `${POSITIONS[pos] ?? POSITIONS['bottom-right']} rounded`;
38
+ }
39
+
40
+ // ── Style injection — idempotent, runs once ────────────────────────────────────
41
+ function injectStyles() {
42
+ if (document.getElementById('pgm-a11y-styles')) return;
43
+ const el = document.createElement('style');
44
+ el.id = 'pgm-a11y-styles';
45
+ el.textContent = css;
46
+ document.head.appendChild(el);
47
+ }
48
+
49
+ // ── Mount — idempotent, runs once ─────────────────────────────────────────────
50
+ let _root = null;
51
+
52
+ function mount() {
53
+ if (document.getElementById('pgm-a11y-root')) return;
54
+ injectStyles();
55
+ const container = document.createElement('div');
56
+ container.id = 'pgm-a11y-root';
57
+ document.body.appendChild(container);
58
+ _root = createRoot(container);
59
+ _root.render(<A11yWidget className={getWidgetClass()} />);
60
+ }
61
+
62
+ function unmount() {
63
+ _root?.unmount();
64
+ document.getElementById('pgm-a11y-root')?.remove();
65
+ document.getElementById('pgm-a11y-styles')?.remove();
66
+ _root = null;
67
+ }
68
+
69
+ // ── Boot ──────────────────────────────────────────────────────────────────────
70
+ if (document.readyState === 'loading') {
71
+ document.addEventListener('DOMContentLoaded', mount);
72
+ } else {
73
+ mount();
74
+ }
75
+
76
+ // Expose programmatic control for advanced users via window.PigmilA11y
77
+ export { mount, unmount };