@pigmilcom/a11y 1.0.6 → 1.0.7

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 (10) hide show
  1. package/README.md +1 -23
  2. package/dist/a11y.cdn.js +4 -4
  3. package/dist/index.css +347 -634
  4. package/dist/index.js +35 -35
  5. package/dist/index.min.css +1 -1
  6. package/dist/index.min.js +1 -1
  7. package/dist/index.min.mjs +1 -1
  8. package/dist/index.mjs +35 -35
  9. package/package.json +3 -6
  10. package/src/cdn.jsx +3 -4
package/dist/index.mjs CHANGED
@@ -61,7 +61,7 @@ var TOGGLES = [
61
61
  key: "highContrast",
62
62
  label: "High Contrast",
63
63
  desc: "Increase colour contrast for readability",
64
- icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
64
+ icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
65
65
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
66
66
  /* @__PURE__ */ jsx("path", { d: "M12 2v20" }),
67
67
  /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor", stroke: "none" })
@@ -71,7 +71,7 @@ var TOGGLES = [
71
71
  key: "invertColors",
72
72
  label: "Invert Colors",
73
73
  desc: "Invert all page colours",
74
- icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
74
+ icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
75
75
  /* @__PURE__ */ jsx("path", { d: "M12 3v18M3 12h18" }),
76
76
  /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 0 1 0 18", fill: "currentColor", stroke: "none" })
77
77
  ] })
@@ -80,7 +80,7 @@ var TOGGLES = [
80
80
  key: "grayscale",
81
81
  label: "Grayscale",
82
82
  desc: "Remove all colour from the page",
83
- icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
83
+ icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
84
84
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
85
85
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor", stroke: "none" })
86
86
  ] })
@@ -89,13 +89,13 @@ var TOGGLES = [
89
89
  key: "reduceMotion",
90
90
  label: "Reduce Motion",
91
91
  desc: "Stop animations and transitions",
92
- icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l-7 7 7 7" }) })
92
+ icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M12 5l-7 7 7 7" }) })
93
93
  },
94
94
  {
95
95
  key: "highlightLinks",
96
96
  label: "Highlight Links",
97
97
  desc: "Make all links visible at a glance",
98
- icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
98
+ icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
99
99
  /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
100
100
  /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
101
101
  ] })
@@ -104,13 +104,13 @@ var TOGGLES = [
104
104
  key: "textSpacing",
105
105
  label: "Text Spacing",
106
106
  desc: "Increase letter, word & line spacing",
107
- icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) })
107
+ icon: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) })
108
108
  },
109
109
  {
110
110
  key: "adhd",
111
111
  label: "ADHD Friendly",
112
112
  desc: "Remove distractions, add focus ring",
113
- icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
113
+ icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
114
114
  /* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
115
115
  /* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5" }),
116
116
  /* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5" })
@@ -120,7 +120,7 @@ var TOGGLES = [
120
120
  key: "dyslexia",
121
121
  label: "Dyslexia Font",
122
122
  desc: "Switch to a high-readability typeface",
123
- icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
123
+ icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: [
124
124
  /* @__PURE__ */ jsx("path", { d: "M4 7V4h16v3" }),
125
125
  /* @__PURE__ */ jsx("path", { d: "M9 20h6" }),
126
126
  /* @__PURE__ */ jsx("path", { d: "M12 4v16" })
@@ -172,13 +172,13 @@ function A11yWidget({ className }) {
172
172
  "aria-expanded": open,
173
173
  "aria-haspopup": "dialog",
174
174
  onClick: () => setOpen((v) => !v),
175
- className: `relative flex h-10 w-10 items-center justify-center border border-white/10 bg-[rgba(4,6,10,0.85)] text-white/60 shadow-lg transition-[border-color,color,background] duration-200 hover:border-[rgba(0,229,160,0.4)] hover:bg-[rgba(0,229,160,0.08)] hover:text-[#00e5a0] focus-visible:ring-2 focus-visible:ring-[#00e5a0] ${className ?? ""}`,
175
+ className: `pgm-btn${className ? ` ${className}` : ""}`,
176
176
  children: [
177
- /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: 1.8, "aria-hidden": "true", children: [
177
+ /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon-lg", fill: "none", stroke: "currentColor", strokeWidth: 1.8, "aria-hidden": "true", children: [
178
178
  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" }),
179
179
  /* @__PURE__ */ jsx("path", { d: "M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10", strokeLinecap: "round", strokeLinejoin: "round" })
180
180
  ] }),
181
- isModified && /* @__PURE__ */ jsx("span", { className: "absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-[#00e5a0]", "aria-hidden": "true" })
181
+ isModified && /* @__PURE__ */ jsx("span", { className: "pgm-dot", "aria-hidden": "true" })
182
182
  ]
183
183
  }
184
184
  ),
@@ -187,7 +187,7 @@ function A11yWidget({ className }) {
187
187
  /* @__PURE__ */ jsx(
188
188
  "div",
189
189
  {
190
- className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm",
190
+ className: "pgm-backdrop",
191
191
  onClick: () => setOpen(false),
192
192
  "aria-hidden": "true"
193
193
  }
@@ -198,12 +198,12 @@ function A11yWidget({ className }) {
198
198
  role: "dialog",
199
199
  "aria-modal": "true",
200
200
  "aria-label": "Accessibility settings",
201
- className: "fixed left-1/2 top-1/2 z-9999 w-[clamp(280px,90vw,360px)] -translate-x-1/2 -translate-y-1/2 border border-white/10 bg-[rgba(4,6,10,0.98)] shadow-2xl max-[480px]:w-[calc(100vw-2rem)]",
201
+ className: "pgm-dialog",
202
202
  children: [
203
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-white/[0.07] px-4 py-3", children: [
203
+ /* @__PURE__ */ jsxs("div", { className: "pgm-header", children: [
204
204
  /* @__PURE__ */ jsxs("div", { children: [
205
- /* @__PURE__ */ jsx("p", { className: "text-[0.72rem] font-semibold tracking-widest text-[#eef1f8] uppercase", children: "Accessibility" }),
206
- /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[0.52rem] tracking-[0.12em] text-white/35 uppercase", children: "WCAG 2.1 \xB7 Personalise your experience" })
205
+ /* @__PURE__ */ jsx("p", { className: "pgm-header-title", children: "Accessibility" }),
206
+ /* @__PURE__ */ jsx("p", { className: "pgm-header-subtitle", children: "WCAG 2.1 \xB7 Personalise your experience" })
207
207
  ] }),
208
208
  /* @__PURE__ */ jsx(
209
209
  "button",
@@ -211,29 +211,29 @@ function A11yWidget({ className }) {
211
211
  type: "button",
212
212
  "aria-label": "Close accessibility panel",
213
213
  onClick: () => setOpen(false),
214
- className: "flex h-6 w-6 items-center justify-center text-white/30 transition-colors duration-150 hover:text-white/80 focus-visible:ring-2 focus-visible:ring-[#00e5a0]",
215
- children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12", strokeLinecap: "round" }) })
214
+ className: "pgm-close-btn",
215
+ children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-icon-sm", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12", strokeLinecap: "round" }) })
216
216
  }
217
217
  )
218
218
  ] }),
219
- /* @__PURE__ */ jsxs("div", { className: "border-b border-white/[0.07] px-4 py-3", children: [
220
- /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
221
- /* @__PURE__ */ jsx("span", { className: "text-[0.6rem] tracking-[0.16em] text-white/50 uppercase", children: "Text Size" }),
222
- /* @__PURE__ */ jsx("span", { className: "text-[0.56rem] tracking-[0.12em] text-[#00e5a0] uppercase", children: TEXT_LABELS[prefs.textSize] })
219
+ /* @__PURE__ */ jsxs("div", { className: "pgm-size-section", children: [
220
+ /* @__PURE__ */ jsxs("div", { className: "pgm-size-header", children: [
221
+ /* @__PURE__ */ jsx("span", { className: "pgm-size-label", children: "Text Size" }),
222
+ /* @__PURE__ */ jsx("span", { className: "pgm-size-value", children: TEXT_LABELS[prefs.textSize] })
223
223
  ] }),
224
- /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: TEXT_LABELS.map((lbl, i) => /* @__PURE__ */ jsx(
224
+ /* @__PURE__ */ jsx("div", { className: "pgm-size-btns", children: TEXT_LABELS.map((lbl, i) => /* @__PURE__ */ jsx(
225
225
  "button",
226
226
  {
227
227
  type: "button",
228
228
  "aria-pressed": prefs.textSize === i,
229
229
  onClick: () => update({ textSize: i }),
230
- className: `flex-1 border py-1.5 text-center text-[0.58rem] uppercase tracking-widest transition-[background,border-color,color] duration-150 focus-visible:ring-2 focus-visible:ring-[#00e5a0] ${prefs.textSize === i ? "border-[#00e5a0] bg-[rgba(0,229,160,0.1)] text-[#00e5a0]" : "border-white/10 bg-transparent text-white/35 hover:border-white/25 hover:text-white/60"}`,
230
+ className: `pgm-size-btn ${prefs.textSize === i ? "pgm-size-btn--active" : "pgm-size-btn--inactive"}`,
231
231
  children: lbl
232
232
  },
233
233
  lbl
234
234
  )) })
235
235
  ] }),
236
- /* @__PURE__ */ jsx("div", { className: "max-h-[min(50vh,340px)] overflow-y-auto", children: TOGGLES.map(({ key, label, desc, icon }) => {
236
+ /* @__PURE__ */ jsx("div", { className: "pgm-toggle-list", children: TOGGLES.map(({ key, label, desc, icon }) => {
237
237
  const on = prefs[key];
238
238
  return /* @__PURE__ */ jsxs(
239
239
  "button",
@@ -242,22 +242,22 @@ function A11yWidget({ className }) {
242
242
  role: "switch",
243
243
  "aria-checked": on,
244
244
  onClick: () => update({ [key]: !on }),
245
- className: `group flex w-full items-center gap-3 px-4 py-2.5 text-left transition-[background] duration-150 hover:bg-white/3 focus-visible:ring-2 focus-visible:ring-[#00e5a0] ${on ? "bg-[rgba(0,229,160,0.04)]" : ""}`,
245
+ className: `pgm-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
246
246
  children: [
247
- /* @__PURE__ */ jsx("span", { className: `shrink-0 transition-colors duration-150 ${on ? "text-[#00e5a0]" : "text-white/30 group-hover:text-white/50"}`, children: icon }),
248
- /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
249
- /* @__PURE__ */ jsx("span", { className: `block text-[0.68rem] font-medium leading-none tracking-[0.04em] transition-colors duration-150 ${on ? "text-[#eef1f8]" : "text-white/55"}`, children: label }),
250
- /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[0.52rem] leading-snug tracking-[0.06em] text-white/25", children: desc })
247
+ /* @__PURE__ */ jsx("span", { className: `pgm-toggle-icon${on ? " pgm-toggle-icon--on" : ""}`, children: icon }),
248
+ /* @__PURE__ */ jsxs("span", { className: "pgm-toggle-text", children: [
249
+ /* @__PURE__ */ jsx("span", { className: `pgm-toggle-label${on ? " pgm-toggle-label--on" : ""}`, children: label }),
250
+ /* @__PURE__ */ jsx("span", { className: "pgm-toggle-desc", children: desc })
251
251
  ] }),
252
252
  /* @__PURE__ */ jsx(
253
253
  "span",
254
254
  {
255
255
  "aria-hidden": "true",
256
- className: `relative h-4 w-7 shrink-0 rounded-full border transition-[background,border-color] duration-200 ${on ? "border-[#00e5a0] bg-[rgba(0,229,160,0.2)]" : "border-white/15 bg-transparent"}`,
256
+ className: `pgm-pill${on ? " pgm-pill--on" : " pgm-pill--off"}`,
257
257
  children: /* @__PURE__ */ jsx(
258
258
  "span",
259
259
  {
260
- className: `absolute top-0.5 h-3 w-3 rounded-full transition-[left,background] duration-200 ${on ? "left-3.5 bg-[#00e5a0]" : "left-0.5 bg-white/25"}`
260
+ className: `pgm-pill-knob${on ? " pgm-pill-knob--on" : " pgm-pill-knob--off"}`
261
261
  }
262
262
  )
263
263
  }
@@ -267,15 +267,15 @@ function A11yWidget({ className }) {
267
267
  key
268
268
  );
269
269
  }) }),
270
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-white/[0.07] px-4 py-2.5", children: [
271
- /* @__PURE__ */ jsx("span", { className: "text-[0.5rem] uppercase tracking-widest text-white/20", children: "Changes apply instantly & persist" }),
270
+ /* @__PURE__ */ jsxs("div", { className: "pgm-footer", children: [
271
+ /* @__PURE__ */ jsx("span", { className: "pgm-footer-note", children: "Changes apply instantly & persist" }),
272
272
  /* @__PURE__ */ jsx(
273
273
  "button",
274
274
  {
275
275
  type: "button",
276
276
  onClick: reset,
277
277
  disabled: !isModified,
278
- className: "text-[0.56rem] uppercase tracking-[0.12em] text-white/30 underline-offset-2 transition-colors duration-150 hover:text-[#ff6b6b] disabled:cursor-not-allowed disabled:opacity-30 focus-visible:ring-2 focus-visible:ring-[#00e5a0]",
278
+ className: "pgm-reset-btn",
279
279
  children: "Reset all"
280
280
  }
281
281
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pigmilcom/a11y",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
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",
@@ -40,8 +40,8 @@
40
40
  "scripts": {
41
41
  "build:js": "tsup",
42
42
  "build:js:min": "tsup --config tsup.min.config.mjs",
43
- "build:css": "tailwindcss -i src/a11y.css -o dist/index.css",
44
- "build:css:min": "tailwindcss -i src/a11y.css -o dist/index.min.css --minify",
43
+ "build:css": "node scripts/build-css.js",
44
+ "build:css:min": "node scripts/build-css.js",
45
45
  "build:cdn": "npm run build:css && tsup --config tsup.cdn.config.mjs && node -e \"require('fs').unlinkSync('./dist/a11y.cdn.css')\"",
46
46
  "build": "npm run build:js && npm run build:js:min && npm run build:css && npm run build:css:min && npm run build:cdn",
47
47
  "dev": "tsup --watch",
@@ -52,11 +52,8 @@
52
52
  "react-dom": ">=17.0.0"
53
53
  },
54
54
  "devDependencies": {
55
- "autoprefixer": "^10.4.20",
56
- "postcss": "^8.4.47",
57
55
  "react": "^18.3.1",
58
56
  "react-dom": "^18.3.1",
59
- "tailwindcss": "^3.4.14",
60
57
  "tsup": "^8.3.0",
61
58
  "typescript": "^5.7.3"
62
59
  },
package/src/cdn.jsx CHANGED
@@ -17,15 +17,14 @@
17
17
  import { createRoot } from 'react-dom/client';
18
18
  import A11yWidget from './widget.jsx';
19
19
 
20
- // Inline the pre-built CSS (Tailwind utilities + a11y modifier rules).
20
+ // Inline the pre-built CSS (widget UI + a11y modifier rules).
21
21
  // esbuild treats .css files as raw text via the loader option in tsup.cdn.config.mjs.
22
22
  import css from '../dist/index.css';
23
23
 
24
24
  // ── Capture currentScript synchronously (only valid during initial execution) ─
25
25
  const _script = document.currentScript;
26
26
 
27
- // ── Position map — inline CSS applied to the container (avoids Tailwind ordering
28
- // conflicts where .relative overrides .fixed when both are on the same element)
27
+ // ── Position map — inline CSS applied to the container ────────────────────────
29
28
  const POSITIONS = {
30
29
  'bottom-right': 'bottom:1.25rem;right:1.25rem',
31
30
  'bottom-left': 'bottom:1.25rem;left:1.25rem',
@@ -56,7 +55,7 @@ function mount() {
56
55
  container.setAttribute('style', `position:fixed;z-index:9998;${posCSS}`);
57
56
  document.body.appendChild(container);
58
57
  _root = createRoot(container);
59
- _root.render(<A11yWidget className="rounded" />);
58
+ _root.render(<A11yWidget />);
60
59
  }
61
60
 
62
61
  function unmount() {