@pigmilcom/a11y 1.0.8 → 1.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/README.md +107 -18
- package/dist/a11y.cdn.js +96 -16
- package/dist/index.css +90 -10
- package/dist/index.js +126 -8
- package/dist/index.min.css +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.mjs +1 -1
- package/dist/index.mjs +124 -7
- package/package.json +1 -1
- package/src/cdn.jsx +2 -2
package/dist/index.css
CHANGED
|
@@ -69,9 +69,11 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
69
69
|
z-index: 9999;
|
|
70
70
|
width: clamp(280px,90vw,360px);
|
|
71
71
|
transform: translate(-50%,-50%);
|
|
72
|
-
border: 1px solid rgba(255,255,255,0.
|
|
72
|
+
border: 1px solid rgba(255,255,255,0.12);
|
|
73
73
|
background: rgba(4,6,10,0.98);
|
|
74
|
-
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.
|
|
74
|
+
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
|
|
75
|
+
border-radius: 0.625rem;
|
|
76
|
+
overflow: hidden;
|
|
75
77
|
}
|
|
76
78
|
@media (max-width: 480px) {
|
|
77
79
|
.pgm-dialog { width: calc(100vw - 2rem); }
|
|
@@ -185,6 +187,23 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
185
187
|
.pgm-toggle-list {
|
|
186
188
|
max-height: min(50vh,340px);
|
|
187
189
|
overflow-y: auto;
|
|
190
|
+
/* Modern slim scrollbar — Firefox */
|
|
191
|
+
scrollbar-width: thin;
|
|
192
|
+
scrollbar-color: rgba(255,255,255,0.12) transparent;
|
|
193
|
+
}
|
|
194
|
+
/* Modern slim scrollbar — Webkit (Chrome / Safari / Edge) */
|
|
195
|
+
.pgm-toggle-list::-webkit-scrollbar {
|
|
196
|
+
width: 3px;
|
|
197
|
+
}
|
|
198
|
+
.pgm-toggle-list::-webkit-scrollbar-track {
|
|
199
|
+
background: transparent;
|
|
200
|
+
}
|
|
201
|
+
.pgm-toggle-list::-webkit-scrollbar-thumb {
|
|
202
|
+
background: rgba(255,255,255,0.14);
|
|
203
|
+
border-radius: 9999px;
|
|
204
|
+
}
|
|
205
|
+
.pgm-toggle-list::-webkit-scrollbar-thumb:hover {
|
|
206
|
+
background: rgba(255,255,255,0.28);
|
|
188
207
|
}
|
|
189
208
|
|
|
190
209
|
/* Toggle buttons */
|
|
@@ -227,7 +246,7 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
227
246
|
line-height: 1;
|
|
228
247
|
letter-spacing: 0.04em;
|
|
229
248
|
transition: color 150ms;
|
|
230
|
-
color: rgba(255,255,255,0.
|
|
249
|
+
color: rgba(255,255,255,0.72);
|
|
231
250
|
}
|
|
232
251
|
.pgm-toggle-label--on { color: #eef1f8; }
|
|
233
252
|
.pgm-toggle-desc {
|
|
@@ -236,7 +255,7 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
236
255
|
font-size: 0.52rem;
|
|
237
256
|
line-height: 1.375;
|
|
238
257
|
letter-spacing: 0.06em;
|
|
239
|
-
color: rgba(255,255,255,0.
|
|
258
|
+
color: rgba(255,255,255,0.38);
|
|
240
259
|
}
|
|
241
260
|
|
|
242
261
|
/* Pill toggle */
|
|
@@ -271,12 +290,6 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
271
290
|
border-top: 1px solid rgba(255,255,255,0.07);
|
|
272
291
|
padding: 0.625rem 1rem;
|
|
273
292
|
}
|
|
274
|
-
.pgm-footer-note {
|
|
275
|
-
font-size: 0.5rem;
|
|
276
|
-
text-transform: uppercase;
|
|
277
|
-
letter-spacing: 0.1em;
|
|
278
|
-
color: rgba(255,255,255,0.2);
|
|
279
|
-
}
|
|
280
293
|
.pgm-reset-btn {
|
|
281
294
|
font-size: 0.56rem;
|
|
282
295
|
text-transform: uppercase;
|
|
@@ -296,6 +309,73 @@ accessibility class rules that get toggled on <html> by the widget.
|
|
|
296
309
|
box-shadow: 0 0 0 2px #00e5a0;
|
|
297
310
|
}
|
|
298
311
|
|
|
312
|
+
/* Notice toggle button in footer */
|
|
313
|
+
.pgm-notice-btn {
|
|
314
|
+
display: flex;
|
|
315
|
+
align-items: center;
|
|
316
|
+
gap: 0.375rem;
|
|
317
|
+
background: none;
|
|
318
|
+
border: none;
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
color: rgba(255,255,255,0.25);
|
|
321
|
+
font-size: 0.5rem;
|
|
322
|
+
text-transform: uppercase;
|
|
323
|
+
letter-spacing: 0.1em;
|
|
324
|
+
padding: 0;
|
|
325
|
+
transition: color 150ms;
|
|
326
|
+
}
|
|
327
|
+
.pgm-notice-btn:hover { color: rgba(255,255,255,0.55); }
|
|
328
|
+
.pgm-notice-btn:focus-visible {
|
|
329
|
+
outline: none;
|
|
330
|
+
box-shadow: 0 0 0 2px #00e5a0;
|
|
331
|
+
border-radius: 2px;
|
|
332
|
+
}
|
|
333
|
+
.pgm-notice-logo {
|
|
334
|
+
width: 0.875rem;
|
|
335
|
+
height: 0.875rem;
|
|
336
|
+
border-radius: 2px;
|
|
337
|
+
flex-shrink: 0;
|
|
338
|
+
}
|
|
339
|
+
.pgm-notice-chevron {
|
|
340
|
+
width: 0.625rem;
|
|
341
|
+
height: 0.625rem;
|
|
342
|
+
flex-shrink: 0;
|
|
343
|
+
transition: transform 200ms;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* Collapsible notice panel */
|
|
347
|
+
.pgm-notice {
|
|
348
|
+
border-top: 1px solid rgba(255,255,255,0.07);
|
|
349
|
+
padding: 0.75rem 1rem 1rem;
|
|
350
|
+
display: flex;
|
|
351
|
+
flex-direction: column;
|
|
352
|
+
gap: 0.625rem;
|
|
353
|
+
}
|
|
354
|
+
.pgm-notice-text {
|
|
355
|
+
font-size: 0.625rem;
|
|
356
|
+
line-height: 1.65;
|
|
357
|
+
color: rgba(255,255,255,0.4);
|
|
358
|
+
margin: 0;
|
|
359
|
+
}
|
|
360
|
+
.pgm-notice-link,
|
|
361
|
+
.pgm-notice-gh {
|
|
362
|
+
font-size: 0.625rem;
|
|
363
|
+
color: #00e5a0;
|
|
364
|
+
text-decoration: none;
|
|
365
|
+
transition: opacity 150ms;
|
|
366
|
+
}
|
|
367
|
+
.pgm-notice-link:hover,
|
|
368
|
+
.pgm-notice-gh:hover { opacity: 0.75; }
|
|
369
|
+
.pgm-notice-gh {
|
|
370
|
+
display: inline-flex;
|
|
371
|
+
align-items: center;
|
|
372
|
+
gap: 0.3rem;
|
|
373
|
+
font-size: 0.56rem;
|
|
374
|
+
text-transform: uppercase;
|
|
375
|
+
letter-spacing: 0.1em;
|
|
376
|
+
font-weight: 600;
|
|
377
|
+
}
|
|
378
|
+
|
|
299
379
|
/* ── Text size ──────────────────────────────────────────────────────────────── */
|
|
300
380
|
html.a11y-text-lg { font-size: 118% !important; }
|
|
301
381
|
html.a11y-text-xl { font-size: 145% !important; }
|
package/dist/index.js
CHANGED
|
@@ -20,14 +20,70 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.js
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
A11yWidget: () =>
|
|
24
|
-
|
|
23
|
+
A11yWidget: () => A11y,
|
|
24
|
+
a11y: () => A11y,
|
|
25
|
+
default: () => A11y
|
|
25
26
|
});
|
|
26
27
|
module.exports = __toCommonJS(index_exports);
|
|
27
28
|
|
|
28
29
|
// src/widget.jsx
|
|
29
30
|
var import_react = require("react");
|
|
30
31
|
var import_react_dom = require("react-dom");
|
|
32
|
+
|
|
33
|
+
// src/license.js
|
|
34
|
+
var _LRE = /^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;
|
|
35
|
+
function _isLocalDev() {
|
|
36
|
+
try {
|
|
37
|
+
const { hostname: h, port: p } = location;
|
|
38
|
+
if (_LRE.test(h)) return true;
|
|
39
|
+
if (p && p !== "80" && p !== "443") return true;
|
|
40
|
+
return false;
|
|
41
|
+
} catch {
|
|
42
|
+
return true;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
var _CK = "_pgm_lc";
|
|
46
|
+
function _readCache() {
|
|
47
|
+
try {
|
|
48
|
+
const v = sessionStorage.getItem(_CK);
|
|
49
|
+
if (!v) return null;
|
|
50
|
+
const p = JSON.parse(v);
|
|
51
|
+
return Date.now() - (p._ts || 0) < 18e5 ? p : null;
|
|
52
|
+
} catch {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
function _writeCache(result) {
|
|
57
|
+
try {
|
|
58
|
+
sessionStorage.setItem(_CK, JSON.stringify({ ...result, _ts: Date.now() }));
|
|
59
|
+
} catch {
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
var _mock = () => Promise.resolve({ ok: true, plan: "free", blocked: false });
|
|
63
|
+
async function validateLicense() {
|
|
64
|
+
const cached = _readCache();
|
|
65
|
+
if (cached) return { status: cached.status, plan: cached.plan };
|
|
66
|
+
if (_isLocalDev()) {
|
|
67
|
+
const result2 = { status: "dev", plan: "free" };
|
|
68
|
+
_writeCache(result2);
|
|
69
|
+
return result2;
|
|
70
|
+
}
|
|
71
|
+
const domain = typeof location !== "undefined" ? location.hostname.toLowerCase().replace(/^www\./, "") : "";
|
|
72
|
+
if (!domain) return { status: "error", plan: "free" };
|
|
73
|
+
let result;
|
|
74
|
+
try {
|
|
75
|
+
const data = await _mock();
|
|
76
|
+
if (!(data == null ? void 0 : data.ok)) result = { status: "error", plan: "free" };
|
|
77
|
+
else if (data.blocked) result = { status: "blocked", plan: data.plan || "free" };
|
|
78
|
+
else result = { status: "valid", plan: data.plan || "free" };
|
|
79
|
+
} catch {
|
|
80
|
+
result = { status: "error", plan: "free" };
|
|
81
|
+
}
|
|
82
|
+
_writeCache(result);
|
|
83
|
+
return result;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// src/widget.jsx
|
|
31
87
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
88
|
var STORAGE_KEY = "pgm-a11y";
|
|
33
89
|
var DEFAULTS = {
|
|
@@ -152,14 +208,19 @@ var TOGGLES = [
|
|
|
152
208
|
] })
|
|
153
209
|
}
|
|
154
210
|
];
|
|
155
|
-
function
|
|
211
|
+
function A11y({ className }) {
|
|
156
212
|
const [open, setOpen] = (0, import_react.useState)(false);
|
|
157
213
|
const [prefs, setPrefs] = (0, import_react.useState)(DEFAULTS);
|
|
158
214
|
const [mounted, setMounted] = (0, import_react.useState)(false);
|
|
215
|
+
const [notice, setNotice] = (0, import_react.useState)(false);
|
|
216
|
+
const [license, setLicense] = (0, import_react.useState)({ status: "checking", plan: "free" });
|
|
159
217
|
const triggerRef = (0, import_react.useRef)(null);
|
|
160
218
|
(0, import_react.useEffect)(() => {
|
|
161
219
|
setMounted(true);
|
|
162
220
|
}, []);
|
|
221
|
+
(0, import_react.useEffect)(() => {
|
|
222
|
+
validateLicense().then(setLicense);
|
|
223
|
+
}, []);
|
|
163
224
|
(0, import_react.useEffect)(() => {
|
|
164
225
|
const saved = load();
|
|
165
226
|
setPrefs(saved);
|
|
@@ -173,6 +234,10 @@ function A11yWidget({ className }) {
|
|
|
173
234
|
document.addEventListener("keydown", onKey);
|
|
174
235
|
return () => document.removeEventListener("keydown", onKey);
|
|
175
236
|
}, [open]);
|
|
237
|
+
if (license.status === "checking" || license.status === "error" || license.status === "blocked") {
|
|
238
|
+
return null;
|
|
239
|
+
}
|
|
240
|
+
const isPro = license.plan === "pro";
|
|
176
241
|
const update = (patch) => {
|
|
177
242
|
setPrefs((prev) => {
|
|
178
243
|
const next = { ...prev, ...patch };
|
|
@@ -197,7 +262,7 @@ function A11yWidget({ className }) {
|
|
|
197
262
|
"aria-expanded": open,
|
|
198
263
|
"aria-haspopup": "dialog",
|
|
199
264
|
onClick: () => setOpen((v) => !v),
|
|
200
|
-
className: `pgm-btn${className ? ` ${className}` : ""}`,
|
|
265
|
+
className: `pgm-btn a11y-widget-btn${className ? ` ${className}` : ""}`,
|
|
201
266
|
children: [
|
|
202
267
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "pgm-icon-lg", fill: "none", stroke: "currentColor", strokeWidth: 1.8, "aria-hidden": "true", children: [
|
|
203
268
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
@@ -223,7 +288,7 @@ function A11yWidget({ className }) {
|
|
|
223
288
|
role: "dialog",
|
|
224
289
|
"aria-modal": "true",
|
|
225
290
|
"aria-label": "Accessibility settings",
|
|
226
|
-
className: "pgm-dialog",
|
|
291
|
+
className: "pgm-dialog a11y-widget-dialog",
|
|
227
292
|
children: [
|
|
228
293
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-header", children: [
|
|
229
294
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
@@ -267,7 +332,7 @@ function A11yWidget({ className }) {
|
|
|
267
332
|
role: "switch",
|
|
268
333
|
"aria-checked": on,
|
|
269
334
|
onClick: () => update({ [key]: !on }),
|
|
270
|
-
className: `pgm-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
335
|
+
className: `pgm-toggle-btn a11y-widget-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
|
|
271
336
|
children: [
|
|
272
337
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `pgm-toggle-icon${on ? " pgm-toggle-icon--on" : ""}`, children: icon }),
|
|
273
338
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "pgm-toggle-text", children: [
|
|
@@ -293,7 +358,28 @@ function A11yWidget({ className }) {
|
|
|
293
358
|
);
|
|
294
359
|
}) }),
|
|
295
360
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "pgm-footer", children: [
|
|
296
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
361
|
+
!isPro && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
362
|
+
"button",
|
|
363
|
+
{
|
|
364
|
+
type: "button",
|
|
365
|
+
"aria-expanded": notice,
|
|
366
|
+
"aria-controls": "pgm-notice",
|
|
367
|
+
onClick: () => setNotice((v) => !v),
|
|
368
|
+
className: "pgm-notice-btn",
|
|
369
|
+
children: [
|
|
370
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
371
|
+
"img",
|
|
372
|
+
{
|
|
373
|
+
src: "https://cdn.pigmil.com/shared/icon.png",
|
|
374
|
+
alt: "Pigmil",
|
|
375
|
+
className: "pgm-notice-logo"
|
|
376
|
+
}
|
|
377
|
+
),
|
|
378
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "About this widget" }),
|
|
379
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-notice-chevron", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", style: { transform: notice ? "rotate(180deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
380
|
+
]
|
|
381
|
+
}
|
|
382
|
+
),
|
|
297
383
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
298
384
|
"button",
|
|
299
385
|
{
|
|
@@ -304,6 +390,37 @@ function A11yWidget({ className }) {
|
|
|
304
390
|
children: "Reset all"
|
|
305
391
|
}
|
|
306
392
|
)
|
|
393
|
+
] }),
|
|
394
|
+
!isPro && notice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: "pgm-notice", className: "pgm-notice", children: [
|
|
395
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "pgm-notice-text", children: [
|
|
396
|
+
"This accessibility widget is provided free of charge by",
|
|
397
|
+
" ",
|
|
398
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
399
|
+
"a",
|
|
400
|
+
{
|
|
401
|
+
href: "https://github.com/pigmilcom/a11y",
|
|
402
|
+
target: "_blank",
|
|
403
|
+
rel: "noopener noreferrer",
|
|
404
|
+
className: "pgm-notice-link",
|
|
405
|
+
children: "PIGMIL"
|
|
406
|
+
}
|
|
407
|
+
),
|
|
408
|
+
" ",
|
|
409
|
+
"as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."
|
|
410
|
+
] }),
|
|
411
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
412
|
+
"a",
|
|
413
|
+
{
|
|
414
|
+
href: "https://github.com/pigmilcom/a11y",
|
|
415
|
+
target: "_blank",
|
|
416
|
+
rel: "noopener noreferrer",
|
|
417
|
+
className: "pgm-notice-gh",
|
|
418
|
+
children: [
|
|
419
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "pgm-icon-sm", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }) }),
|
|
420
|
+
"View on GitHub"
|
|
421
|
+
]
|
|
422
|
+
}
|
|
423
|
+
)
|
|
307
424
|
] })
|
|
308
425
|
]
|
|
309
426
|
}
|
|
@@ -315,5 +432,6 @@ function A11yWidget({ className }) {
|
|
|
315
432
|
}
|
|
316
433
|
// Annotate the CommonJS export names for ESM import in node:
|
|
317
434
|
0 && (module.exports = {
|
|
318
|
-
A11yWidget
|
|
435
|
+
A11yWidget,
|
|
436
|
+
a11y
|
|
319
437
|
});
|
package/dist/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pgm-icon{width:1rem;height:1rem}.pgm-icon-lg{width:1.25rem;height:1.25rem}.pgm-icon-sm{width:0.875rem;height:0.875rem}.pgm-btn{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,0.1);background:rgba(4,6,10,0.85);color:rgba(255,255,255,0.6);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);transition:border-color 200ms,color 200ms,background 200ms;cursor:pointer;border-radius:0.25rem;padding:0}.pgm-btn:hover{border-color:rgba(0,229,160,0.4);background:rgba(0,229,160,0.08);color:#00e5a0}.pgm-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-dot{position:absolute;top:0.375rem;right:0.375rem;width:0.375rem;height:0.375rem;border-radius:9999px;background:#00e5a0}.pgm-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}.pgm-dialog{position:fixed;left:50%;top:50%;z-index:9999;width:clamp(280px,90vw,360px);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,0.
|
|
1
|
+
.pgm-icon{width:1rem;height:1rem}.pgm-icon-lg{width:1.25rem;height:1.25rem}.pgm-icon-sm{width:0.875rem;height:0.875rem}.pgm-btn{position:relative;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,0.1);background:rgba(4,6,10,0.85);color:rgba(255,255,255,0.6);box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);transition:border-color 200ms,color 200ms,background 200ms;cursor:pointer;border-radius:0.25rem;padding:0}.pgm-btn:hover{border-color:rgba(0,229,160,0.4);background:rgba(0,229,160,0.08);color:#00e5a0}.pgm-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-dot{position:absolute;top:0.375rem;right:0.375rem;width:0.375rem;height:0.375rem;border-radius:9999px;background:#00e5a0}.pgm-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px)}.pgm-dialog{position:fixed;left:50%;top:50%;z-index:9999;width:clamp(280px,90vw,360px);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,0.12);background:rgba(4,6,10,0.98);box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);border-radius:0.625rem;overflow:hidden}@media (max-width:480px){.pgm-dialog{width:calc(100vw - 2rem)}}.pgm-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.07);padding:0.75rem 1rem}.pgm-header-title{font-size:0.72rem;font-weight:600;letter-spacing:0.1em;color:#eef1f8;text-transform:uppercase;margin:0}.pgm-header-subtitle{margin-top:0.125rem;margin-bottom:0;font-size:0.52rem;letter-spacing:0.12em;color:rgba(255,255,255,0.35);text-transform:uppercase}.pgm-close-btn{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:rgba(255,255,255,0.3);transition:color 150ms;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}.pgm-close-btn:hover{color:rgba(255,255,255,0.8)}.pgm-close-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-size-section{border-bottom:1px solid rgba(255,255,255,0.07);padding:0.75rem 1rem}.pgm-size-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}.pgm-size-label{font-size:0.6rem;letter-spacing:0.16em;color:rgba(255,255,255,0.5);text-transform:uppercase}.pgm-size-value{font-size:0.56rem;letter-spacing:0.12em;color:#00e5a0;text-transform:uppercase}.pgm-size-btns{display:flex;gap:0.375rem}.pgm-size-btn{flex:1;border:1px solid;padding:0.375rem 0;text-align:center;font-size:0.58rem;text-transform:uppercase;letter-spacing:0.1em;transition:background 150ms,border-color 150ms,color 150ms;background:none;cursor:pointer}.pgm-size-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-size-btn--active{border-color:#00e5a0;background:rgba(0,229,160,0.1);color:#00e5a0}.pgm-size-btn--inactive{border-color:rgba(255,255,255,0.1);background:transparent;color:rgba(255,255,255,0.35)}.pgm-size-btn--inactive:hover{border-color:rgba(255,255,255,0.25);color:rgba(255,255,255,0.6)}.pgm-toggle-list{max-height:min(50vh,340px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent}.pgm-toggle-list::-webkit-scrollbar{width:3px}.pgm-toggle-list::-webkit-scrollbar-track{background:transparent}.pgm-toggle-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:9999px}.pgm-toggle-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28)}.pgm-toggle-btn{display:flex;width:100%;align-items:center;gap:0.75rem;padding:0.625rem 1rem;text-align:left;transition:background 150ms;background:none;border:none;cursor:pointer}.pgm-toggle-btn:hover{background:rgba(255,255,255,0.03)}.pgm-toggle-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #00e5a0}.pgm-toggle-btn--on{background:rgba(0,229,160,0.04)}.pgm-toggle-icon{flex-shrink:0;transition:color 150ms;color:rgba(255,255,255,0.3)}.pgm-toggle-icon--on{color:#00e5a0}.pgm-toggle-btn:hover .pgm-toggle-icon:not(.pgm-toggle-icon--on){color:rgba(255,255,255,0.5)}.pgm-toggle-text{min-width:0;flex:1}.pgm-toggle-label{display:block;font-size:0.68rem;font-weight:500;line-height:1;letter-spacing:0.04em;transition:color 150ms;color:rgba(255,255,255,0.72)}.pgm-toggle-label--on{color:#eef1f8}.pgm-toggle-desc{margin-top:0.125rem;display:block;font-size:0.52rem;line-height:1.375;letter-spacing:0.06em;color:rgba(255,255,255,0.38)}.pgm-pill{position:relative;height:1rem;width:1.75rem;flex-shrink:0;border-radius:9999px;border:1px solid;transition:background 200ms,border-color 200ms}.pgm-pill--on{border-color:#00e5a0;background:rgba(0,229,160,0.2)}.pgm-pill--off{border-color:rgba(255,255,255,0.15);background:transparent}.pgm-pill-knob{position:absolute;top:0.125rem;height:0.75rem;width:0.75rem;border-radius:9999px;transition:left 200ms,background 200ms}.pgm-pill-knob--on{left:0.875rem;background:#00e5a0}.pgm-pill-knob--off{left:0.125rem;background:rgba(255,255,255,0.25)}.pgm-footer{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;border-top:1px solid rgba(255,255,255,0.07);padding:0.625rem 1rem}.pgm-reset-btn{font-size:0.56rem;text-transform:uppercase;letter-spacing:0.12em;color:rgba(255,255,255,0.3);text-underline-offset:0.125rem;transition:color 150ms;background:none;border:none;cursor:pointer;padding:0}.pgm-reset-btn:hover{color:#ff6b6b}.pgm-reset-btn:disabled{cursor:not-allowed;opacity:0.3}.pgm-reset-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0}.pgm-notice-btn{display:flex;align-items:center;gap:0.375rem;background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.25);font-size:0.5rem;text-transform:uppercase;letter-spacing:0.1em;padding:0;transition:color 150ms}.pgm-notice-btn:hover{color:rgba(255,255,255,0.55)}.pgm-notice-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #00e5a0;border-radius:2px}.pgm-notice-logo{width:0.875rem;height:0.875rem;border-radius:2px;flex-shrink:0}.pgm-notice-chevron{width:0.625rem;height:0.625rem;flex-shrink:0;transition:transform 200ms}.pgm-notice{border-top:1px solid rgba(255,255,255,0.07);padding:0.75rem 1rem 1rem;display:flex;flex-direction:column;gap:0.625rem}.pgm-notice-text{font-size:0.625rem;line-height:1.65;color:rgba(255,255,255,0.4);margin:0}.pgm-notice-link,.pgm-notice-gh{font-size:0.625rem;color:#00e5a0;text-decoration:none;transition:opacity 150ms}.pgm-notice-link:hover,.pgm-notice-gh:hover{opacity:0.75}.pgm-notice-gh{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.56rem;text-transform:uppercase;letter-spacing:0.1em;font-weight:600}html.a11y-text-lg{font-size:118% !important}html.a11y-text-xl{font-size:145% !important}html.a11y-high-contrast body{--foreground:#ffffff;--background:#000000}html.a11y-invert img,html.a11y-invert video,html.a11y-invert canvas,html.a11y-invert svg:not([data-a11y-skip]){filter:invert(1) hue-rotate(180deg)}html.a11y-reduce-motion *,html.a11y-reduce-motion *::before,html.a11y-reduce-motion *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}html.a11y-highlight-links a,html.a11y-highlight-links [role="link"]{text-decoration:underline !important;text-underline-offset:3px !important;outline:2px solid !important;outline-offset:2px !important}html.a11y-text-spacing *:not(input):not(textarea){letter-spacing:0.12em !important;word-spacing:0.18em !important;line-height:1.85 !important}html.a11y-adhd *,html.a11y-adhd *::before,html.a11y-adhd *::after{animation:none !important;transition:none !important}html.a11y-adhd:focus-visible{outline:3px solid #facc15 !important;outline-offset:3px !important;border-radius:2px !important}html.a11y-dyslexia,html.a11y-dyslexia *{font-family:'Arial','Verdana','Helvetica',sans-serif !important;word-spacing:0.22em !important;line-height:1.95 !important;letter-spacing:0.04em !important}
|
package/dist/index.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var h=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var i in a)h(t,i,{get:a[i],enumerable:!0})},B=(t,a,i,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of z(a))!w.call(t,n)&&n!==i&&h(t,n,{get:()=>a[n],enumerable:!(o=L(a,n))||o.enumerable});return t};var E=t=>B(h({},"__esModule",{value:!0}),t);var $={};W($,{A11yWidget:()=>p,default:()=>p});module.exports=E($);var l=require("react"),b=require("react-dom"),e=require("react/jsx-runtime"),x="pgm-a11y",c={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function u(t){let a=document.documentElement;a.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&a.classList.add("a11y-text-lg"),t.textSize===2&&a.classList.add("a11y-text-xl");let i={"a11y-high-contrast":t.highContrast,"a11y-invert":t.invertColors,"a11y-grayscale":t.grayscale,"a11y-reduce-motion":t.reduceMotion,"a11y-highlight-links":t.highlightLinks,"a11y-text-spacing":t.textSpacing,"a11y-adhd":t.adhd,"a11y-dyslexia":t.dyslexia};for(let[n,m]of Object.entries(i))a.classList.toggle(n,m);let o=[];t.invertColors&&o.push("invert(1) hue-rotate(180deg)"),t.highContrast&&o.push("contrast(1.6)"),t.grayscale&&o.push("grayscale(1)"),a.style.filter=o.join(" ")}function A(){try{let t=localStorage.getItem(x);return t?{...c,...JSON.parse(t)}:{...c}}catch{return{...c}}}function f(t){try{localStorage.setItem(x,JSON.stringify(t))}catch{}}var k=["Normal","Large","X-Large"],O=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,e.jsx)("path",{d:"M12 2v20"}),(0,e.jsx)("path",{d:"M12 2a10 10 0 0 1 0 20",fill:"currentColor",stroke:"none"})]})},{key:"invertColors",label:"Invert Colors",desc:"Invert all page colours",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 3v18M3 12h18"}),(0,e.jsx)("path",{d:"M12 3a9 9 0 0 1 0 18",fill:"currentColor",stroke:"none"})]})},{key:"grayscale",label:"Grayscale",desc:"Remove all colour from the page",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,e.jsx)("circle",{cx:"12",cy:"12",r:"4",fill:"currentColor",stroke:"none"})]})},{key:"reduceMotion",label:"Reduce Motion",desc:"Stop animations and transitions",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M5 12h14M12 5l-7 7 7 7"})})},{key:"highlightLinks",label:"Highlight Links",desc:"Make all links visible at a glance",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.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"}),(0,e.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"})]})},{key:"textSpacing",label:"Text Spacing",desc:"Increase letter, word & line spacing",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M4 6h16M4 10h16M4 14h16M4 18h16"})})},{key:"adhd",label:"ADHD Friendly",desc:"Remove distractions, add focus ring",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),(0,e.jsx)("path",{d:"M2 17l10 5 10-5"}),(0,e.jsx)("path",{d:"M2 12l10 5 10-5"})]})},{key:"dyslexia",label:"Dyslexia Font",desc:"Switch to a high-readability typeface",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M4 7V4h16v3"}),(0,e.jsx)("path",{d:"M9 20h6"}),(0,e.jsx)("path",{d:"M12 4v16"})]})}];function p({className:t}){let[a,i]=(0,l.useState)(!1),[o,n]=(0,l.useState)(c),[m,N]=(0,l.useState)(!1),C=(0,l.useRef)(null);(0,l.useEffect)(()=>{N(!0)},[]),(0,l.useEffect)(()=>{let s=A();n(s),u(s)},[]),(0,l.useEffect)(()=>{if(!a)return;let s=r=>{r.key==="Escape"&&i(!1)};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[a]);let v=s=>{n(r=>{let g={...r,...s};return u(g),f(g),g})},M=()=>{n(c),u(c),f(c)},y=JSON.stringify(o)!==JSON.stringify(c);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:C,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>i(s=>!s),className:`pgm-btn${t?` ${t}`:""}`,children:[(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-lg",fill:"none",stroke:"currentColor",strokeWidth:1.8,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"5",r:"1.5",fill:"currentColor",stroke:"none"}),(0,e.jsx)("path",{d:"M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10",strokeLinecap:"round",strokeLinejoin:"round"})]}),y&&(0,e.jsx)("span",{className:"pgm-dot","aria-hidden":"true"})]}),a&&m&&(0,b.createPortal)((0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"pgm-backdrop",onClick:()=>i(!1),"aria-hidden":"true"}),(0,e.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog",children:[(0,e.jsxs)("div",{className:"pgm-header",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"pgm-header-title",children:"Accessibility"}),(0,e.jsx)("p",{className:"pgm-header-subtitle",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),(0,e.jsx)("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>i(!1),className:"pgm-close-btn",children:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),(0,e.jsxs)("div",{className:"pgm-size-section",children:[(0,e.jsxs)("div",{className:"pgm-size-header",children:[(0,e.jsx)("span",{className:"pgm-size-label",children:"Text Size"}),(0,e.jsx)("span",{className:"pgm-size-value",children:k[o.textSize]})]}),(0,e.jsx)("div",{className:"pgm-size-btns",children:k.map((s,r)=>(0,e.jsx)("button",{type:"button","aria-pressed":o.textSize===r,onClick:()=>v({textSize:r}),className:`pgm-size-btn ${o.textSize===r?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:s},s))})]}),(0,e.jsx)("div",{className:"pgm-toggle-list",children:O.map(({key:s,label:r,desc:g,icon:S})=>{let d=o[s];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":d,onClick:()=>v({[s]:!d}),className:`pgm-toggle-btn${d?" pgm-toggle-btn--on":""}`,children:[(0,e.jsx)("span",{className:`pgm-toggle-icon${d?" pgm-toggle-icon--on":""}`,children:S}),(0,e.jsxs)("span",{className:"pgm-toggle-text",children:[(0,e.jsx)("span",{className:`pgm-toggle-label${d?" pgm-toggle-label--on":""}`,children:r}),(0,e.jsx)("span",{className:"pgm-toggle-desc",children:g})]}),(0,e.jsx)("span",{"aria-hidden":"true",className:`pgm-pill${d?" pgm-pill--on":" pgm-pill--off"}`,children:(0,e.jsx)("span",{className:`pgm-pill-knob${d?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},s)})}),(0,e.jsxs)("div",{className:"pgm-footer",children:[(0,e.jsx)("span",{className:"pgm-footer-note",children:"Changes apply instantly & persist"}),(0,e.jsx)("button",{type:"button",onClick:M,disabled:!y,className:"pgm-reset-btn",children:"Reset all"})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget});
|
|
1
|
+
var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var R=(t,a)=>{for(var s in a)f(t,s,{get:a[s],enumerable:!0})},$=(t,a,s,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of O(a))!D.call(t,r)&&r!==s&&f(t,r,{get:()=>a[r],enumerable:!(o=E(a,r))||o.enumerable});return t};var P=t=>$(f({},"__esModule",{value:!0}),t);var K={};R(K,{A11yWidget:()=>p,a11y:()=>p,default:()=>p});module.exports=P(K);var i=require("react"),S=require("react-dom");var T=/^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;function G(){try{let{hostname:t,port:a}=location;return!!(T.test(t)||a&&a!=="80"&&a!=="443")}catch{return!0}}var N="_pgm_lc";function J(){try{let t=sessionStorage.getItem(N);if(!t)return null;let a=JSON.parse(t);return Date.now()-(a._ts||0)<18e5?a:null}catch{return null}}function x(t){try{sessionStorage.setItem(N,JSON.stringify({...t,_ts:Date.now()}))}catch{}}var H=()=>Promise.resolve({ok:!0,plan:"free",blocked:!1});async function C(){let t=J();if(t)return{status:t.status,plan:t.plan};if(G()){let o={status:"dev",plan:"free"};return x(o),o}if(!(typeof location<"u"?location.hostname.toLowerCase().replace(/^www\./,""):""))return{status:"error",plan:"free"};let s;try{let o=await H();o!=null&&o.ok?o.blocked?s={status:"blocked",plan:o.plan||"free"}:s={status:"valid",plan:o.plan||"free"}:s={status:"error",plan:"free"}}catch{s={status:"error",plan:"free"}}return x(s),s}var e=require("react/jsx-runtime"),L="pgm-a11y",c={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function v(t){let a=document.documentElement;a.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&a.classList.add("a11y-text-lg"),t.textSize===2&&a.classList.add("a11y-text-xl");let s={"a11y-high-contrast":t.highContrast,"a11y-invert":t.invertColors,"a11y-grayscale":t.grayscale,"a11y-reduce-motion":t.reduceMotion,"a11y-highlight-links":t.highlightLinks,"a11y-text-spacing":t.textSpacing,"a11y-adhd":t.adhd,"a11y-dyslexia":t.dyslexia};for(let[r,u]of Object.entries(s))a.classList.toggle(r,u);let o=[];t.invertColors&&o.push("invert(1) hue-rotate(180deg)"),t.highContrast&&o.push("contrast(1.6)"),t.grayscale&&o.push("grayscale(1)"),a.style.filter=o.join(" ")}function j(){try{let t=localStorage.getItem(L);return t?{...c,...JSON.parse(t)}:{...c}}catch{return{...c}}}function w(t){try{localStorage.setItem(L,JSON.stringify(t))}catch{}}var M=["Normal","Large","X-Large"],F=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,e.jsx)("path",{d:"M12 2v20"}),(0,e.jsx)("path",{d:"M12 2a10 10 0 0 1 0 20",fill:"currentColor",stroke:"none"})]})},{key:"invertColors",label:"Invert Colors",desc:"Invert all page colours",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 3v18M3 12h18"}),(0,e.jsx)("path",{d:"M12 3a9 9 0 0 1 0 18",fill:"currentColor",stroke:"none"})]})},{key:"grayscale",label:"Grayscale",desc:"Remove all colour from the page",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,e.jsx)("circle",{cx:"12",cy:"12",r:"4",fill:"currentColor",stroke:"none"})]})},{key:"reduceMotion",label:"Reduce Motion",desc:"Stop animations and transitions",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M5 12h14M12 5l-7 7 7 7"})})},{key:"highlightLinks",label:"Highlight Links",desc:"Make all links visible at a glance",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.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"}),(0,e.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"})]})},{key:"textSpacing",label:"Text Spacing",desc:"Increase letter, word & line spacing",icon:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M4 6h16M4 10h16M4 14h16M4 18h16"})})},{key:"adhd",label:"ADHD Friendly",desc:"Remove distractions, add focus ring",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),(0,e.jsx)("path",{d:"M2 17l10 5 10-5"}),(0,e.jsx)("path",{d:"M2 12l10 5 10-5"})]})},{key:"dyslexia",label:"Dyslexia Font",desc:"Switch to a high-readability typeface",icon:(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[(0,e.jsx)("path",{d:"M4 7V4h16v3"}),(0,e.jsx)("path",{d:"M9 20h6"}),(0,e.jsx)("path",{d:"M12 4v16"})]})}];function p({className:t}){let[a,s]=(0,i.useState)(!1),[o,r]=(0,i.useState)(c),[u,_]=(0,i.useState)(!1),[h,z]=(0,i.useState)(!1),[m,A]=(0,i.useState)({status:"checking",plan:"free"}),B=(0,i.useRef)(null);if((0,i.useEffect)(()=>{_(!0)},[]),(0,i.useEffect)(()=>{C().then(A)},[]),(0,i.useEffect)(()=>{let n=j();r(n),v(n)},[]),(0,i.useEffect)(()=>{if(!a)return;let n=l=>{l.key==="Escape"&&s(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[a]),m.status==="checking"||m.status==="error"||m.status==="blocked")return null;let y=m.plan==="pro",b=n=>{r(l=>{let g={...l,...n};return v(g),w(g),g})},I=()=>{r(c),v(c),w(c)},k=JSON.stringify(o)!==JSON.stringify(c);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:B,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>s(n=>!n),className:`pgm-btn a11y-widget-btn${t?` ${t}`:""}`,children:[(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-lg",fill:"none",stroke:"currentColor",strokeWidth:1.8,"aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"12",cy:"5",r:"1.5",fill:"currentColor",stroke:"none"}),(0,e.jsx)("path",{d:"M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10",strokeLinecap:"round",strokeLinejoin:"round"})]}),k&&(0,e.jsx)("span",{className:"pgm-dot","aria-hidden":"true"})]}),a&&u&&(0,S.createPortal)((0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"pgm-backdrop",onClick:()=>s(!1),"aria-hidden":"true"}),(0,e.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog a11y-widget-dialog",children:[(0,e.jsxs)("div",{className:"pgm-header",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"pgm-header-title",children:"Accessibility"}),(0,e.jsx)("p",{className:"pgm-header-subtitle",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),(0,e.jsx)("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>s(!1),className:"pgm-close-btn",children:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:(0,e.jsx)("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),(0,e.jsxs)("div",{className:"pgm-size-section",children:[(0,e.jsxs)("div",{className:"pgm-size-header",children:[(0,e.jsx)("span",{className:"pgm-size-label",children:"Text Size"}),(0,e.jsx)("span",{className:"pgm-size-value",children:M[o.textSize]})]}),(0,e.jsx)("div",{className:"pgm-size-btns",children:M.map((n,l)=>(0,e.jsx)("button",{type:"button","aria-pressed":o.textSize===l,onClick:()=>b({textSize:l}),className:`pgm-size-btn ${o.textSize===l?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:n},n))})]}),(0,e.jsx)("div",{className:"pgm-toggle-list",children:F.map(({key:n,label:l,desc:g,icon:W})=>{let d=o[n];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":d,onClick:()=>b({[n]:!d}),className:`pgm-toggle-btn a11y-widget-toggle-btn${d?" pgm-toggle-btn--on":""}`,children:[(0,e.jsx)("span",{className:`pgm-toggle-icon${d?" pgm-toggle-icon--on":""}`,children:W}),(0,e.jsxs)("span",{className:"pgm-toggle-text",children:[(0,e.jsx)("span",{className:`pgm-toggle-label${d?" pgm-toggle-label--on":""}`,children:l}),(0,e.jsx)("span",{className:"pgm-toggle-desc",children:g})]}),(0,e.jsx)("span",{"aria-hidden":"true",className:`pgm-pill${d?" pgm-pill--on":" pgm-pill--off"}`,children:(0,e.jsx)("span",{className:`pgm-pill-knob${d?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},n)})}),(0,e.jsxs)("div",{className:"pgm-footer",children:[!y&&(0,e.jsxs)("button",{type:"button","aria-expanded":h,"aria-controls":"pgm-notice",onClick:()=>z(n=>!n),className:"pgm-notice-btn",children:[(0,e.jsx)("img",{src:"https://cdn.pigmil.com/shared/icon.png",alt:"Pigmil",className:"pgm-notice-logo"}),(0,e.jsx)("span",{children:"About this widget"}),(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-notice-chevron",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",style:{transform:h?"rotate(180deg)":"rotate(0deg)"},children:(0,e.jsx)("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})})]}),(0,e.jsx)("button",{type:"button",onClick:I,disabled:!k,className:"pgm-reset-btn",children:"Reset all"})]}),!y&&h&&(0,e.jsxs)("div",{id:"pgm-notice",className:"pgm-notice",children:[(0,e.jsxs)("p",{className:"pgm-notice-text",children:["This accessibility widget is provided free of charge by"," ",(0,e.jsx)("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-link",children:"PIGMIL"})," ","as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."]}),(0,e.jsxs)("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-gh",children:[(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"currentColor","aria-hidden":"true",children:(0,e.jsx)("path",{d:"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"})}),"View on GitHub"]})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget,a11y});
|
package/dist/index.min.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect as
|
|
1
|
+
import{useEffect as u,useRef as P,useState as p}from"react";import{createPortal as T}from"react-dom";var O=/^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;function D(){try{let{hostname:t,port:s}=location;return!!(O.test(t)||s&&s!=="80"&&s!=="443")}catch{return!0}}var C="_pgm_lc";function R(){try{let t=sessionStorage.getItem(C);if(!t)return null;let s=JSON.parse(t);return Date.now()-(s._ts||0)<18e5?s:null}catch{return null}}function N(t){try{sessionStorage.setItem(C,JSON.stringify({...t,_ts:Date.now()}))}catch{}}var $=()=>Promise.resolve({ok:!0,plan:"free",blocked:!1});async function w(){let t=R();if(t)return{status:t.status,plan:t.plan};if(D()){let o={status:"dev",plan:"free"};return N(o),o}if(!(typeof location<"u"?location.hostname.toLowerCase().replace(/^www\./,""):""))return{status:"error",plan:"free"};let i;try{let o=await $();o!=null&&o.ok?o.blocked?i={status:"blocked",plan:o.plan||"free"}:i={status:"valid",plan:o.plan||"free"}:i={status:"error",plan:"free"}}catch{i={status:"error",plan:"free"}}return N(i),i}import{Fragment as L,jsx as e,jsxs as a}from"react/jsx-runtime";var _="pgm-a11y",l={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function y(t){let s=document.documentElement;s.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&s.classList.add("a11y-text-lg"),t.textSize===2&&s.classList.add("a11y-text-xl");let i={"a11y-high-contrast":t.highContrast,"a11y-invert":t.invertColors,"a11y-grayscale":t.grayscale,"a11y-reduce-motion":t.reduceMotion,"a11y-highlight-links":t.highlightLinks,"a11y-text-spacing":t.textSpacing,"a11y-adhd":t.adhd,"a11y-dyslexia":t.dyslexia};for(let[d,f]of Object.entries(i))s.classList.toggle(d,f);let o=[];t.invertColors&&o.push("invert(1) hue-rotate(180deg)"),t.highContrast&&o.push("contrast(1.6)"),t.grayscale&&o.push("grayscale(1)"),s.style.filter=o.join(" ")}function G(){try{let t=localStorage.getItem(_);return t?{...l,...JSON.parse(t)}:{...l}}catch{return{...l}}}function M(t){try{localStorage.setItem(_,JSON.stringify(t))}catch{}}var S=["Normal","Large","X-Large"],J=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("path",{d:"M12 2v20"}),e("path",{d:"M12 2a10 10 0 0 1 0 20",fill:"currentColor",stroke:"none"})]})},{key:"invertColors",label:"Invert Colors",desc:"Invert all page colours",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M12 3v18M3 12h18"}),e("path",{d:"M12 3a9 9 0 0 1 0 18",fill:"currentColor",stroke:"none"})]})},{key:"grayscale",label:"Grayscale",desc:"Remove all colour from the page",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("circle",{cx:"12",cy:"12",r:"9"}),e("circle",{cx:"12",cy:"12",r:"4",fill:"currentColor",stroke:"none"})]})},{key:"reduceMotion",label:"Reduce Motion",desc:"Stop animations and transitions",icon:e("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M5 12h14M12 5l-7 7 7 7"})})},{key:"highlightLinks",label:"Highlight Links",desc:"Make all links visible at a glance",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),e("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})},{key:"textSpacing",label:"Text Spacing",desc:"Increase letter, word & line spacing",icon:e("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M4 6h16M4 10h16M4 14h16M4 18h16"})})},{key:"adhd",label:"ADHD Friendly",desc:"Remove distractions, add focus ring",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),e("path",{d:"M2 17l10 5 10-5"}),e("path",{d:"M2 12l10 5 10-5"})]})},{key:"dyslexia",label:"Dyslexia Font",desc:"Switch to a high-readability typeface",icon:a("svg",{viewBox:"0 0 24 24",className:"pgm-icon",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e("path",{d:"M4 7V4h16v3"}),e("path",{d:"M9 20h6"}),e("path",{d:"M12 4v16"})]})}];function h({className:t}){let[s,i]=p(!1),[o,d]=p(l),[f,z]=p(!1),[v,A]=p(!1),[m,B]=p({status:"checking",plan:"free"}),I=P(null);if(u(()=>{z(!0)},[]),u(()=>{w().then(B)},[]),u(()=>{let n=G();d(n),y(n)},[]),u(()=>{if(!s)return;let n=r=>{r.key==="Escape"&&i(!1)};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[s]),m.status==="checking"||m.status==="error"||m.status==="blocked")return null;let b=m.plan==="pro",k=n=>{d(r=>{let g={...r,...n};return y(g),M(g),g})},W=()=>{d(l),y(l),M(l)},x=JSON.stringify(o)!==JSON.stringify(l);return a(L,{children:[a("button",{ref:I,type:"button","aria-label":"Accessibility options","aria-expanded":s,"aria-haspopup":"dialog",onClick:()=>i(n=>!n),className:`pgm-btn a11y-widget-btn${t?` ${t}`:""}`,children:[a("svg",{viewBox:"0 0 24 24",className:"pgm-icon-lg",fill:"none",stroke:"currentColor",strokeWidth:1.8,"aria-hidden":"true",children:[e("circle",{cx:"12",cy:"5",r:"1.5",fill:"currentColor",stroke:"none"}),e("path",{d:"M5 8.5h14M8 8.5l1 10 3-4 3 4 1-10",strokeLinecap:"round",strokeLinejoin:"round"})]}),x&&e("span",{className:"pgm-dot","aria-hidden":"true"})]}),s&&f&&T(a(L,{children:[e("div",{className:"pgm-backdrop",onClick:()=>i(!1),"aria-hidden":"true"}),a("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",className:"pgm-dialog a11y-widget-dialog",children:[a("div",{className:"pgm-header",children:[a("div",{children:[e("p",{className:"pgm-header-title",children:"Accessibility"}),e("p",{className:"pgm-header-subtitle",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),e("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>i(!1),className:"pgm-close-btn",children:e("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),a("div",{className:"pgm-size-section",children:[a("div",{className:"pgm-size-header",children:[e("span",{className:"pgm-size-label",children:"Text Size"}),e("span",{className:"pgm-size-value",children:S[o.textSize]})]}),e("div",{className:"pgm-size-btns",children:S.map((n,r)=>e("button",{type:"button","aria-pressed":o.textSize===r,onClick:()=>k({textSize:r}),className:`pgm-size-btn ${o.textSize===r?"pgm-size-btn--active":"pgm-size-btn--inactive"}`,children:n},n))})]}),e("div",{className:"pgm-toggle-list",children:J.map(({key:n,label:r,desc:g,icon:E})=>{let c=o[n];return a("button",{type:"button",role:"switch","aria-checked":c,onClick:()=>k({[n]:!c}),className:`pgm-toggle-btn a11y-widget-toggle-btn${c?" pgm-toggle-btn--on":""}`,children:[e("span",{className:`pgm-toggle-icon${c?" pgm-toggle-icon--on":""}`,children:E}),a("span",{className:"pgm-toggle-text",children:[e("span",{className:`pgm-toggle-label${c?" pgm-toggle-label--on":""}`,children:r}),e("span",{className:"pgm-toggle-desc",children:g})]}),e("span",{"aria-hidden":"true",className:`pgm-pill${c?" pgm-pill--on":" pgm-pill--off"}`,children:e("span",{className:`pgm-pill-knob${c?" pgm-pill-knob--on":" pgm-pill-knob--off"}`})})]},n)})}),a("div",{className:"pgm-footer",children:[!b&&a("button",{type:"button","aria-expanded":v,"aria-controls":"pgm-notice",onClick:()=>A(n=>!n),className:"pgm-notice-btn",children:[e("img",{src:"https://cdn.pigmil.com/shared/icon.png",alt:"Pigmil",className:"pgm-notice-logo"}),e("span",{children:"About this widget"}),e("svg",{viewBox:"0 0 24 24",className:"pgm-notice-chevron",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",style:{transform:v?"rotate(180deg)":"rotate(0deg)"},children:e("path",{d:"M6 9l6 6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})})]}),e("button",{type:"button",onClick:W,disabled:!x,className:"pgm-reset-btn",children:"Reset all"})]}),!b&&v&&a("div",{id:"pgm-notice",className:"pgm-notice",children:[a("p",{className:"pgm-notice-text",children:["This accessibility widget is provided free of charge by"," ",e("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-link",children:"PIGMIL"})," ","as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."]}),a("a",{href:"https://github.com/pigmilcom/a11y",target:"_blank",rel:"noopener noreferrer",className:"pgm-notice-gh",children:[e("svg",{viewBox:"0 0 24 24",className:"pgm-icon-sm",fill:"currentColor","aria-hidden":"true",children:e("path",{d:"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"})}),"View on GitHub"]})]})]})]}),document.body)]})}export{h as A11yWidget,h as a11y,h as default};
|