@pigmilcom/a11y 1.0.1 → 1.0.4

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.
Files changed (8) hide show
  1. package/README.md +41 -1
  2. package/dist/a11y.cdn.js +8 -224
  3. package/dist/index.css +4 -0
  4. package/dist/index.min.css +1 -0
  5. package/dist/index.min.js +1 -0
  6. package/dist/index.min.mjs +1 -0
  7. package/package.json +4 -2
  8. package/src/cdn.jsx +11 -11
package/dist/index.css CHANGED
@@ -91,6 +91,10 @@ accessibility class rules that get toggled on <html> by the widget.
91
91
  display: block;
92
92
  }
93
93
 
94
+ .inline {
95
+ display: inline;
96
+ }
97
+
94
98
  .flex {
95
99
  display: flex;
96
100
  }
package/dist/index.min.css ADDED
@@ -0,0 +1 @@
1
+ .visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-5{bottom:1.25rem}.left-0\.5{left:.125rem}.left-1\/2{left:50%}.left-3\.5{left:.875rem}.left-5{left:1.25rem}.right-1\.5{right:.375rem}.right-5{right:1.25rem}.top-0\.5{top:.125rem}.top-1\.5{top:.375rem}.top-1\/2{top:50%}.top-5{top:1.25rem}.z-9998{z-index:9998}.z-9999{z-index:9999}.mb-2{margin-bottom:.5rem}.mt-0\.5{margin-top:.125rem}.block{display:block}.inline{display:inline}.flex{display:flex}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.max-h-\[min\(50vh\2c 340px\)\]{max-height:min(50vh,340px)}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-\[clamp\(280px\2c 90vw\2c 360px\)\]{width:clamp(280px,90vw,360px)}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-3{gap:.75rem}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[\#00e5a0\]{--tw-border-opacity:1;border-color:rgb(0 229 160/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.border-white\/\[0\.07\]{border-color:hsla(0,0%,100%,.07)}.bg-\[\#00e5a0\]{--tw-bg-opacity:1;background-color:rgb(0 229 160/var(--tw-bg-opacity,1))}.bg-\[rgba\(0\2c 229\2c 160\2c 0\.04\)\]{background-color:rgba(0,229,160,.04)}.bg-\[rgba\(0\2c 229\2c 160\2c 0\.1\)\]{background-color:rgba(0,229,160,.1)}.bg-\[rgba\(0\2c 229\2c 160\2c 0\.2\)\]{background-color:rgba(0,229,160,.2)}.bg-\[rgba\(4\2c 6\2c 10\2c 0\.85\)\]{background-color:rgba(4,6,10,.85)}.bg-\[rgba\(4\2c 6\2c 10\2c 0\.98\)\]{background-color:rgba(4,6,10,.98)}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-transparent{background-color:transparent}.bg-white\/25{background-color:hsla(0,0%,100%,.25)}.px-4{padding-left:1rem;padding-right:1rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[0\.52rem\]{font-size:.52rem}.text-\[0\.56rem\]{font-size:.56rem}.text-\[0\.58rem\]{font-size:.58rem}.text-\[0\.5rem\]{font-size:.5rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.6rem\]{font-size:.6rem}.text-\[0\.72rem\]{font-size:.72rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-snug{line-height:1.375}.tracking-\[0\.04em\]{letter-spacing:.04em}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.16em\]{letter-spacing:.16em}.tracking-widest{letter-spacing:.1em}.text-\[\#00e5a0\]{--tw-text-opacity:1;color:rgb(0 229 160/var(--tw-text-opacity,1))}.text-\[\#eef1f8\]{--tw-text-opacity:1;color:rgb(238 241 248/var(--tw-text-opacity,1))}.text-white\/20{color:hsla(0,0%,100%,.2)}.text-white\/25{color:hsla(0,0%,100%,.25)}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/35{color:hsla(0,0%,100%,.35)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/55{color:hsla(0,0%,100%,.55)}.text-white\/60{color:hsla(0,0%,100%,.6)}.underline-offset-2{text-underline-offset:2px}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-\[background\2c border-color\2c color\]{transition-property:background,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[background\2c border-color\]{transition-property:background,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[background\]{transition-property:background;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[border-color\2c color\2c background\]{transition-property:border-color,color,background;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[left\2c background\]{transition-property:left,background;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}html.a11y-text-lg{font-size:118%!important}html.a11y-text-xl{font-size:145%!important}html.a11y-high-contrast body{--foreground:#fff;--background:#000}html.a11y-invert canvas,html.a11y-invert img,html.a11y-invert svg:not([data-a11y-skip]),html.a11y-invert video{filter:invert(1) hue-rotate(180deg)}html.a11y-reduce-motion *,html.a11y-reduce-motion :after,html.a11y-reduce-motion :before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html.a11y-highlight-links [role=link],html.a11y-highlight-links a{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:.12em!important;word-spacing:.18em!important;line-height:1.85!important}html.a11y-adhd *,html.a11y-adhd :after,html.a11y-adhd :before{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:.22em!important;line-height:1.95!important;letter-spacing:.04em!important}.hover\:border-\[rgba\(0\2c 229\2c 160\2c 0\.4\)\]:hover{border-color:rgba(0,229,160,.4)}.hover\:border-white\/25:hover{border-color:hsla(0,0%,100%,.25)}.hover\:bg-\[rgba\(0\2c 229\2c 160\2c 0\.08\)\]:hover{background-color:rgba(0,229,160,.08)}.hover\:text-\[\#00e5a0\]:hover{--tw-text-opacity:1;color:rgb(0 229 160/var(--tw-text-opacity,1))}.hover\:text-\[\#ff6b6b\]:hover{--tw-text-opacity:1;color:rgb(255 107 107/var(--tw-text-opacity,1))}.hover\:text-white\/60:hover{color:hsla(0,0%,100%,.6)}.hover\:text-white\/80:hover{color:hsla(0,0%,100%,.8)}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-\[\#00e5a0\]:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 229 160/var(--tw-ring-opacity,1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.group:hover .group-hover\:text-white\/50{color:hsla(0,0%,100%,.5)}@media (max-width:480px){.max-\[480px\]\:w-\[calc\(100vw-2rem\)\]{width:calc(100vw - 2rem)}}
package/dist/index.min.js ADDED
@@ -0,0 +1 @@
1
+ var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var z=(t,a)=>{for(var s in a)p(t,s,{get:a[s],enumerable:!0})},B=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!W.call(t,o)&&o!==s&&p(t,o,{get:()=>a[o],enumerable:!(i=S(a,o))||i.enumerable});return t};var E=t=>B(p({},"__esModule",{value:!0}),t);var j={};z(j,{A11yWidget:()=>u,default:()=>u});module.exports=E(j);var n=require("react"),y=require("react-dom"),e=require("react/jsx-runtime"),k="pgm-a11y",c={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function b(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[o,g]of Object.entries(s))a.classList.toggle(o,g);let i=[];t.invertColors&&i.push("invert(1) hue-rotate(180deg)"),t.highContrast&&i.push("contrast(1.6)"),t.grayscale&&i.push("grayscale(1)"),a.style.filter=i.join(" ")}function A(){try{let t=localStorage.getItem(k);return t?{...c,...JSON.parse(t)}:{...c}}catch{return{...c}}}function x(t){try{localStorage.setItem(k,JSON.stringify(t))}catch{}}var v=["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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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 u({className:t}){let[a,s]=(0,n.useState)(!1),[i,o]=(0,n.useState)(c),[g,w]=(0,n.useState)(!1),N=(0,n.useRef)(null);(0,n.useEffect)(()=>{w(!0)},[]),(0,n.useEffect)(()=>{let r=A();o(r),b(r)},[]),(0,n.useEffect)(()=>{if(!a)return;let r=l=>{l.key==="Escape"&&s(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[a]);let f=r=>{o(l=>{let h={...l,...r};return b(h),x(h),h})},C=()=>{o(c),b(c),x(c)},m=JSON.stringify(i)!==JSON.stringify(c);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("button",{ref:N,type:"button","aria-label":"Accessibility options","aria-expanded":a,"aria-haspopup":"dialog",onClick:()=>s(r=>!r),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] ${t??""}`,children:[(0,e.jsxs)("svg",{viewBox:"0 0 24 24",className:"h-5 w-5",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"})]}),m&&(0,e.jsx)("span",{className:"absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-[#00e5a0]","aria-hidden":"true"})]}),a&&g&&(0,y.createPortal)((0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm",onClick:()=>s(!1),"aria-hidden":"true"}),(0,e.jsxs)("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",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)]",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between border-b border-white/[0.07] px-4 py-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"text-[0.72rem] font-semibold tracking-widest text-[#eef1f8] uppercase",children:"Accessibility"}),(0,e.jsx)("p",{className:"mt-0.5 text-[0.52rem] tracking-[0.12em] text-white/35 uppercase",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),(0,e.jsx)("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>s(!1),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]",children:(0,e.jsx)("svg",{viewBox:"0 0 24 24",className:"h-3.5 w-3.5",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:"border-b border-white/[0.07] px-4 py-3",children:[(0,e.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,e.jsx)("span",{className:"text-[0.6rem] tracking-[0.16em] text-white/50 uppercase",children:"Text Size"}),(0,e.jsx)("span",{className:"text-[0.56rem] tracking-[0.12em] text-[#00e5a0] uppercase",children:v[i.textSize]})]}),(0,e.jsx)("div",{className:"flex gap-1.5",children:v.map((r,l)=>(0,e.jsx)("button",{type:"button","aria-pressed":i.textSize===l,onClick:()=>f({textSize:l}),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] ${i.textSize===l?"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"}`,children:r},r))})]}),(0,e.jsx)("div",{className:"max-h-[min(50vh,340px)] overflow-y-auto",children:O.map(({key:r,label:l,desc:h,icon:M})=>{let d=i[r];return(0,e.jsxs)("button",{type:"button",role:"switch","aria-checked":d,onClick:()=>f({[r]:!d}),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] ${d?"bg-[rgba(0,229,160,0.04)]":""}`,children:[(0,e.jsx)("span",{className:`shrink-0 transition-colors duration-150 ${d?"text-[#00e5a0]":"text-white/30 group-hover:text-white/50"}`,children:M}),(0,e.jsxs)("span",{className:"min-w-0 flex-1",children:[(0,e.jsx)("span",{className:`block text-[0.68rem] font-medium leading-none tracking-[0.04em] transition-colors duration-150 ${d?"text-[#eef1f8]":"text-white/55"}`,children:l}),(0,e.jsx)("span",{className:"mt-0.5 block text-[0.52rem] leading-snug tracking-[0.06em] text-white/25",children:h})]}),(0,e.jsx)("span",{"aria-hidden":"true",className:`relative h-4 w-7 shrink-0 rounded-full border transition-[background,border-color] duration-200 ${d?"border-[#00e5a0] bg-[rgba(0,229,160,0.2)]":"border-white/15 bg-transparent"}`,children:(0,e.jsx)("span",{className:`absolute top-0.5 h-3 w-3 rounded-full transition-[left,background] duration-200 ${d?"left-3.5 bg-[#00e5a0]":"left-0.5 bg-white/25"}`})})]},r)})}),(0,e.jsxs)("div",{className:"flex items-center justify-between gap-3 border-t border-white/[0.07] px-4 py-2.5",children:[(0,e.jsx)("span",{className:"text-[0.5rem] uppercase tracking-widest text-white/20",children:"Changes apply instantly & persist"}),(0,e.jsx)("button",{type:"button",onClick:C,disabled:!m,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]",children:"Reset all"})]})]})]}),document.body)]})}0&&(module.exports={A11yWidget});
package/dist/index.min.mjs ADDED
@@ -0,0 +1 @@
1
+ import{useEffect as g,useRef as L,useState as p}from"react";import{createPortal as W}from"react-dom";import{Fragment as k,jsx as e,jsxs as a}from"react/jsx-runtime";var w="pgm-a11y",n={textSize:0,highContrast:!1,invertColors:!1,grayscale:!1,reduceMotion:!1,highlightLinks:!1,textSpacing:!1,adhd:!1,dyslexia:!1};function b(t){let i=document.documentElement;i.classList.remove("a11y-text-lg","a11y-text-xl"),t.textSize===1&&i.classList.add("a11y-text-lg"),t.textSize===2&&i.classList.add("a11y-text-xl");let c={"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,u]of Object.entries(c))i.classList.toggle(d,u);let s=[];t.invertColors&&s.push("invert(1) hue-rotate(180deg)"),t.highContrast&&s.push("contrast(1.6)"),t.grayscale&&s.push("grayscale(1)"),i.style.filter=s.join(" ")}function z(){try{let t=localStorage.getItem(w);return t?{...n,...JSON.parse(t)}:{...n}}catch{return{...n}}}function v(t){try{localStorage.setItem(w,JSON.stringify(t))}catch{}}var y=["Normal","Large","X-Large"],B=[{key:"highContrast",label:"High Contrast",desc:"Increase colour contrast for readability",icon:a("svg",{viewBox:"0 0 24 24",className:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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:"w-4 h-4",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 f({className:t}){let[i,c]=p(!1),[s,d]=p(n),[u,N]=p(!1),C=L(null);g(()=>{N(!0)},[]),g(()=>{let r=z();d(r),b(r)},[]),g(()=>{if(!i)return;let r=o=>{o.key==="Escape"&&c(!1)};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[i]);let m=r=>{d(o=>{let h={...o,...r};return b(h),v(h),h})},M=()=>{d(n),b(n),v(n)},x=JSON.stringify(s)!==JSON.stringify(n);return a(k,{children:[a("button",{ref:C,type:"button","aria-label":"Accessibility options","aria-expanded":i,"aria-haspopup":"dialog",onClick:()=>c(r=>!r),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] ${t??""}`,children:[a("svg",{viewBox:"0 0 24 24",className:"h-5 w-5",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:"absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-[#00e5a0]","aria-hidden":"true"})]}),i&&u&&W(a(k,{children:[e("div",{className:"fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm",onClick:()=>c(!1),"aria-hidden":"true"}),a("div",{role:"dialog","aria-modal":"true","aria-label":"Accessibility settings",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)]",children:[a("div",{className:"flex items-center justify-between border-b border-white/[0.07] px-4 py-3",children:[a("div",{children:[e("p",{className:"text-[0.72rem] font-semibold tracking-widest text-[#eef1f8] uppercase",children:"Accessibility"}),e("p",{className:"mt-0.5 text-[0.52rem] tracking-[0.12em] text-white/35 uppercase",children:"WCAG 2.1 \xB7 Personalise your experience"})]}),e("button",{type:"button","aria-label":"Close accessibility panel",onClick:()=>c(!1),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]",children:e("svg",{viewBox:"0 0 24 24",className:"h-3.5 w-3.5",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e("path",{d:"M18 6 6 18M6 6l12 12",strokeLinecap:"round"})})})]}),a("div",{className:"border-b border-white/[0.07] px-4 py-3",children:[a("div",{className:"mb-2 flex items-center justify-between",children:[e("span",{className:"text-[0.6rem] tracking-[0.16em] text-white/50 uppercase",children:"Text Size"}),e("span",{className:"text-[0.56rem] tracking-[0.12em] text-[#00e5a0] uppercase",children:y[s.textSize]})]}),e("div",{className:"flex gap-1.5",children:y.map((r,o)=>e("button",{type:"button","aria-pressed":s.textSize===o,onClick:()=>m({textSize:o}),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] ${s.textSize===o?"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"}`,children:r},r))})]}),e("div",{className:"max-h-[min(50vh,340px)] overflow-y-auto",children:B.map(({key:r,label:o,desc:h,icon:S})=>{let l=s[r];return a("button",{type:"button",role:"switch","aria-checked":l,onClick:()=>m({[r]:!l}),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] ${l?"bg-[rgba(0,229,160,0.04)]":""}`,children:[e("span",{className:`shrink-0 transition-colors duration-150 ${l?"text-[#00e5a0]":"text-white/30 group-hover:text-white/50"}`,children:S}),a("span",{className:"min-w-0 flex-1",children:[e("span",{className:`block text-[0.68rem] font-medium leading-none tracking-[0.04em] transition-colors duration-150 ${l?"text-[#eef1f8]":"text-white/55"}`,children:o}),e("span",{className:"mt-0.5 block text-[0.52rem] leading-snug tracking-[0.06em] text-white/25",children:h})]}),e("span",{"aria-hidden":"true",className:`relative h-4 w-7 shrink-0 rounded-full border transition-[background,border-color] duration-200 ${l?"border-[#00e5a0] bg-[rgba(0,229,160,0.2)]":"border-white/15 bg-transparent"}`,children:e("span",{className:`absolute top-0.5 h-3 w-3 rounded-full transition-[left,background] duration-200 ${l?"left-3.5 bg-[#00e5a0]":"left-0.5 bg-white/25"}`})})]},r)})}),a("div",{className:"flex items-center justify-between gap-3 border-t border-white/[0.07] px-4 py-2.5",children:[e("span",{className:"text-[0.5rem] uppercase tracking-widest text-white/20",children:"Changes apply instantly & persist"}),e("button",{type:"button",onClick:M,disabled:!x,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]",children:"Reset all"})]})]})]}),document.body)]})}export{f as A11yWidget,f as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pigmilcom/a11y",
3
- "version": "1.0.1",
3
+ "version": "1.0.4",
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",
@@ -39,9 +39,11 @@
39
39
  "browser": "./dist/a11y.cdn.js",
40
40
  "scripts": {
41
41
  "build:js": "tsup",
42
+ "build:js:min": "tsup --config tsup.min.config.mjs",
42
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
45
  "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",
46
+ "build": "npm run build:js && npm run build:js:min && npm run build:css && npm run build:css:min && npm run build:cdn",
45
47
  "dev": "tsup --watch",
46
48
  "prepublishOnly": "npm run build"
47
49
  },
package/src/cdn.jsx CHANGED
@@ -24,19 +24,15 @@ import css from '../dist/index.css';
24
24
  // ── Capture currentScript synchronously (only valid during initial execution) ─
25
25
  const _script = document.currentScript;
26
26
 
27
- // ── Position map — maps data-position value to Tailwind utility classes ────────
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)
28
29
  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',
30
+ 'bottom-right': 'bottom:1.25rem;right:1.25rem',
31
+ 'bottom-left': 'bottom:1.25rem;left:1.25rem',
32
+ 'top-right': 'top:1.25rem;right:1.25rem',
33
+ 'top-left': 'top:1.25rem;left:1.25rem',
33
34
  };
34
35
 
35
- function getWidgetClass() {
36
- const pos = _script?.dataset?.position ?? 'bottom-right';
37
- return `${POSITIONS[pos] ?? POSITIONS['bottom-right']} rounded`;
38
- }
39
-
40
36
  // ── Style injection — idempotent, runs once ────────────────────────────────────
41
37
  function injectStyles() {
42
38
  if (document.getElementById('pgm-a11y-styles')) return;
@@ -54,9 +50,13 @@ function mount() {
54
50
  injectStyles();
55
51
  const container = document.createElement('div');
56
52
  container.id = 'pgm-a11y-root';
53
+ // Inline styles win over any class-based CSS — no ordering conflicts
54
+ const pos = _script?.dataset?.position ?? 'bottom-right';
55
+ const posCSS = POSITIONS[pos] ?? POSITIONS['bottom-right'];
56
+ container.setAttribute('style', `position:fixed;z-index:9998;${posCSS}`);
57
57
  document.body.appendChild(container);
58
58
  _root = createRoot(container);
59
- _root.render(<A11yWidget className={getWidgetClass()} />);
59
+ _root.render(<A11yWidget className="rounded" />);
60
60
  }
61
61
 
62
62
  function unmount() {