access-settings 0.0.1

package/dist/index.min.js

@@ -0,0 +1,196 @@
+(()=>{var h=document.createElement("style");h.innerHTML=`
+  @font-face {
+    font-family: open-dyslexic;
+    src: url(https://fonts.cdnfonts.com/s/29616/open-dyslexic.woff);
+  }
+  :root.dyslexic {
+    font-family:open-dyslexic, sans-serif;
+  }
+  :root.invertedColors {
+    filter:invert(1);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:has(access-settings[invert-colors], access-settings[all]) {
+      filter:invert(1);
+      &.invertedColors {
+        filter:invert(0);
+      }
+    }
+  }
+`;document.head.append(h);function u(o){let e=[];function i(n){return new Proxy(n,{set(t,s,f){return t[s]=f,e.forEach(z=>z(String(s),f)),!0},get(t,s){return s==="_isProxy"?!0:t[s]?._isProxy?t[s]:t[s]&&typeof t[s]=="object"?i(t[s]):t[s]}})}return{state:i(o),onStateChange(n){e.push(n)},offStateChange(n){let t=e.indexOf(n);t!==-1&&e.splice(t,1)}}}var r=document.documentElement;function g(){let o=getComputedStyle(r).fontSize;return Number.parseInt(o)}function C(){let o=getComputedStyle(r).lineHeight;return Number.parseInt(o)/g()}var y={dyslexicFont:!1,invertedColors:!1,contraste:100,fontSize:g(),lineHeight:C()},{state:l,onStateChange:a,offStateChange:x}=u(y);a((o,e)=>{switch(o){case"dyslexicFont":e?r.classList.add("dyslexic"):r.classList.remove("dyslexic");break;case"invertedColors":e?r.classList.add("invertedColors"):r.classList.remove("invertedColors");break;case"fontSize":r.style.fontSize=e+"px";break;case"lineHeight":r.style.lineHeight=e;break}});var p={...y};function b(){for(let o in p)l[o]=p[o]}var v="preferences";a(()=>{localStorage.setItem(v,JSON.stringify(l))});var m=localStorage.getItem(v);if(m){let o=JSON.parse(m);for(let e in o)l[e]=o[e]}var S=`
+  :host {
+    font-size:18px;
+    line-height:1.5;
+    position:fixed;
+    top:3px;
+    right:5px;
+  }
+  :host([side="left"]) {
+    right:unset;
+    left:5px;
+    details {
+      align-items: flex-start;
+    }
+  }
+  :host([all]), :host([dyslexic-font]) {
+    form .field[part=dyslexic-font] {
+      display:block;
+    }
+  }
+  :host([all]), :host([invert-colors]) {
+    form .field[part=invert-colors] {
+      display:block;
+    }
+  }
+  :host([all]), :host([font-size]) {
+    form .field[part=font-size] {
+      display:block;
+    }
+  }
+  :host([all]), :host([line-height]) {
+    form .field[part=line-height] {
+      display:block;
+    }
+  }
+  :host([rounded]) ::slotted([slot=icon]), :host([rounded]) #default-icon {
+    border-radius:50%;
+  }
+
+  details {
+    display:flex;
+    flex-direction:column;
+    align-items:flex-end;
+    
+    summary {
+      cursor:pointer;
+      display:flex;
+      align-items:center;
+      
+      #default-icon {
+        border:1px solid #ccc;
+        background-color:#ddd;
+        border-radius:5px;
+        width:40px;
+        height:40px;
+        &:hover {
+          background-color:#e1e1e1;
+        }
+      }
+      ::slotted([slot=icon]) {
+        border:1px solid #ccc;
+        background-color:#ddd;
+        border-radius:5px;
+        padding:0 8px;
+        font-size:30px;
+      }
+    }
+
+    form {
+      font-size:1em;
+      border:1px solid #ccc;
+      color:#222;
+      background-color:#fafafa;
+      line-height:2.5;
+      text-align: left;
+      border-radius:5px;
+
+      .field, ::slotted([slot=option])  {
+        padding: 0 25px 0 15px;
+        display:block;
+        &:hover {
+          background-color:#eee;
+        }
+      }
+
+      .field {
+        display:none;
+      }
+
+      input {
+        font-size:1em;
+        font-family:unset;
+      }
+
+      input[type=number] {
+        width:5ch;
+        border:1px solid #ccc;
+        border-radius:5px;
+        padding:3px;
+      }
+
+      [part=buttons] {
+        text-align:center;
+      }
+    }
+  }
+`;var c=document.createElement("template");c.innerHTML=`
+  <style>${S}</style>
+  <details part="details">
+    <summary part="summary" aria-label="accessibility settings">
+      <slot name="icon">
+        <svg viewBox="0 0 389.9 389.6" part="icon" id="default-icon">
+          <circle fill="none" cx="250.6" cy="146.4" r="35.7" transform="matrix(.160226 -.98708 .98708 .160226 6.75 311.71)"></circle>
+          <path d="M191.4 130.7c-23.693 0-42.9-19.207-42.9-42.9s19.207-42.9 42.9-42.9 42.9 19.207 42.9 42.9a42.89 42.89 0 0 1-42.9 
+            42.9zm0-71.5c-13.69-.038-25.498 9.605-28.197 23.026a28.68 28.68 0 0 0 17.105 32.135c12.641 5.256 27.234.846 34.848-10.531A28.68 
+            28.68 0 0 0 211.6 67.6a29.06 29.06 0 0 0-20.2-8.4zm52.5 278.6a21.46 21.46 0 0 1-19.5-12.6l-33.1-80.3-32.7 80.1a21.41 21.41 0 0 
+            1-37.1 4.1 21.57 21.57 0 0 1-2.1-21.5l34.4-87.5a26.63 26.63 0 0 0 1.9-10.4v-16.4a7.09 7.09 0 0 0-6.5-7.1l-60.6-5.5c-11.791
+            -.911-20.611-11.209-19.7-23s11.209-20.611 23-19.7l75.1 6.7a97.18 97.18 0 0 0 7.7.3h33.4a99.08 99.08 0 0 0 7.7-.3l75-6.7h.1c11.791
+            -.911 22.089 7.909 23 19.7s-7.909 22.089-19.7 23l-60.5 5.5a7.09 7.09 0 0 0-6.5 7.1v16.4a28.29 28.29 0 0 0 2 10.4l34.5 87.9a21.36
+            21.36 0 0 1-1.8 20.2 22.06 22.06 0 0 1-18 9.6zm-52.5-107.1a14.11 14.11 0 0 1 13.1 8.8l33 80.1a7.62 7.62 0 0 0 3.9 3.6 7.13 7.13 
+            0 0 0 9-9.6l-34.6-88.3a42.14 42.14 0 0 1-3-15.7v-16.4c-.054-11.101 8.438-20.376 19.5-21.3l60.6-5.5a7 7 0 0 0 4.9-2.4 6.61 6.61 
+            0 0 0 1.7-5.2 7 7 0 0 0-7.6-6.6l-74.9 6.7a88.33 88.33 0 0 1-8.9.4h-33.4a87 87 0 0 1-8.9-.4l-75-6.7a7.12 7.12 0 0 0-1 14.2l60.7
+              5.5c11.062.924 19.554 10.199 19.5 21.3v16.4a42.14 42.14 0 0 1-3 15.7l-34.5 87.9a7.09 7.09 0 0 0 .3 7.3 7.19 7.19 0 0 0 6.6 3.2 
+              7 7 0 0 0 5.9-4.3l32.9-79.9a14 14 0 0 1 13.2-8.8z">
+          </path>
+        </svg>
+      </slot>
+    </summary>
+    <form part="form">
+      <div class="field" part="dyslexic-font">
+        <input type="checkbox" id="dyslexic-font">
+        <label for="dyslexic-font">Police dyslexie</label>
+      </div>
+      <div class="field" part="invert-colors">
+        <input type="checkbox" id="inverted-colors">
+        <label for="inverted-colors">Couleurs invers\xE9es</label>
+      </div>
+      <div class="field" part="font-size">
+        <input type="number" id="font-size">
+        <label for="font-size">Taille de police</label>
+      </div>
+      <div class="field" part="line-height">
+        <input type="number" id="line-height" step="0.1">
+        <label for="line-height">Interligne</label>
+      </div>
+      <slot name="option"></slot>
+      <div part="buttons"> 
+        <input type="button" id="reset" value="R\xE9initialiser"/>
+        <input type="button" id="close" value="Terminer"/>
+      </div>
+    </form>
+  </details>
+`;var k={fr:{"dyslexic-font":"Police dyslexie","inverted-colors":"Couleurs invers\xE9es","font-size":"Taille de police","line-height":"Hauteur de ligne",reset:"R\xE9initialiser",close:"Terminer"},en:{"dyslexic-font":"Dyslexic font","inverted-colors":"Inverted colors","font-size":"Font size","line-height":"Line height",reset:"Reset",close:"Close"}};var d=class extends HTMLElement{static languages=k;#e;#t;#i;#o;#s;constructor(){super();let e=this.attachShadow({mode:"open"});e.append(c.content.cloneNode(!0)),this.#e=e.querySelector("#dyslexic-font"),this.#t=e.querySelector("#inverted-colors"),this.#i=e.querySelector("#font-size"),this.#o=e.querySelector("#line-height"),this.#e.addEventListener("change",i=>l.dyslexicFont=i.target.checked),this.#t.addEventListener("change",i=>l.invertedColors=i.target.checked),this.#i.addEventListener("change",i=>l.fontSize=i.target.value),this.#o.addEventListener("change",i=>l.lineHeight=i.target.value),e.querySelector("#reset").addEventListener("click",b),e.querySelector("#close").addEventListener("click",()=>{e.querySelector("details").open=!1}),this.#s=new MutationObserver((i,n)=>{for(let t of i)t.attributeName==="lang"&&this.#n()})}#l=()=>{this.#e.checked=l.dyslexicFont,this.#t.checked=l.invertedColors,this.#i.value=l.fontSize,this.#o.value=l.lineHeight};#n(){let e=document.documentElement.lang,i=this.constructor.languages[e],n=this.shadowRoot.querySelectorAll("label");for(let t of n){let s=t.getAttribute("for");i[s]&&(t.textContent=i[s])}for(let t of["close","reset"])this.shadowRoot.querySelector(`#${t}`).value=i[t]}connectedCallback(){this.#l(),this.#n(),a(this.#l),this.#s.observe(document.documentElement,{attributes:!0})}disconnectedCallback(){x(this.#l),this.#s.disconnect()}};customElements.define("access-settings",d);})();
+/**
+ * @license
+ * MIT License
+
+Copyright (c) 2026 Yannick Bochatay https://github.com/YannickBochatay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+**/

package/example/index.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <script src="../src/index.js" type="module"></script>
+  <title>Access Settings Demo</title>
+</head>
+
+<body>
+  <header>
+    <h1>Lorem Ipsum</h1>
+
+    <access-settings side="left" all></access-settings>
+
+    <access-settings side="left" dyslexic-font font-size rounded>
+      <span slot="icon">⚙︎</span>
+    </access-settings>
+
+    <access-settings all side="left" rounded></access-settings>
+
+    <access-settings all side="left">
+      <span slot="icon">👁</span>
+      <div slot="option">
+        <label>
+          <input type="checkbox"/>
+          One more option
+        </label>
+      </div>
+      <div slot="option">
+        <label>
+          <input type="checkbox"/>
+          Another more option
+        </label>
+      </div>
+    </access-settings>
+
+  </header>
+  <main>
+    <article id="article-1">
+      <h2>Article 1</h2>
+      <section id="section-1-1">
+        <h3>Section 1</h3>
+        <p><strong>Lorem ipsum</strong> dolor sit amet, <em>consectetur</em> adipiscing elit. Morbi vel enim vel tortor auctor pharetra sit amet
+          in tellus. Vestibulum varius euismod enim vel dignissim. Maecenas aliquam sed nibh in mollis. Sed ut eros at
+          diam rhoncus vestibulum. Proin egestas lacinia risus, at vestibulum sapien congue vel. Vivamus non malesuada
+          augue. Nam blandit massa nec tellus ultrices, sed luctus mauris pulvinar. Mauris malesuada et erat sit amet
+          porta. Proin sit amet malesuada odio.</p>
+        <p>Nullam elementum mauris nec tellus vehicula, in commodo tellus tempus. Cras lectus lectus, consequat non mi
+          vitae, scelerisque dictum elit. Nulla quis elit rutrum, aliquet nisi at, congue dui. Vestibulum sed lorem sed
+          purus aliquet volutpat. Donec viverra laoreet urna sed fermentum. Nulla non tempus erat. Nulla mattis
+          venenatis urna in blandit. Morbi tempor in dui ac semper. Ut aliquam erat risus, a imperdiet est rutrum at.
+          Cras eros neque, tincidunt a urna nec, condimentum aliquet quam. Nullam vitae urna sit amet magna semper
+          gravida.</p>
+      </section>
+      <section id="section-1-2">
+        <h3>Section 2</h3>
+        <p>Phasellus et sem est. Vivamus bibendum dictum ligula vel tempor. Maecenas congue, enim eu sodales varius,
+          nibh sem laoreet ipsum, vitae fermentum ex tortor non purus. Vestibulum pulvinar malesuada elit, non euismod
+          tortor. Phasellus quis finibus urna. Nunc elementum mattis arcu, ac iaculis dui tristique molestie. Nunc
+          posuere sagittis leo ut pharetra.</p>
+        <p>Praesent in eros eget est tincidunt mattis vitae a sapien. Duis vehicula vulputate vestibulum. Proin vitae ex
+          condimentum tortor cursus laoreet. In quis lectus nec lorem imperdiet rutrum. Nam vitae lorem lacus.
+          Suspendisse eu rhoncus urna. Proin sed euismod odio. Sed egestas elit nec nisl finibus, in tincidunt leo
+          dictum.</p>
+      </section>
+    </article>
+    <article id="article-2">
+      <h2>Article 2</h2>
+      <section id="section-2-1">
+        <h3>Section 1</h3>
+        <p>Morbi vulputate sit amet libero id suscipit. Etiam tincidunt tellus eu turpis convallis semper. Pellentesque
+          vitae gravida sapien, sit amet commodo ante. Integer vestibulum posuere ex. Nam odio nulla, condimentum sed
+          libero in, suscipit viverra lorem. In a felis massa. Sed lacus odio, vulputate non quam a, fringilla faucibus
+          est. Phasellus facilisis sapien purus, ac aliquet elit lobortis a. Donec et scelerisque dui. Aenean vel eros
+          erat. Sed ultricies lectus in enim cursus, ut aliquam nunc convallis. Suspendisse potenti. Quisque nec
+          fermentum massa, blandit commodo dolor. Fusce convallis suscipit ante at suscipit. Quisque imperdiet eu tellus
+          ut porta.</p>
+        <p>Suspendisse potenti. Nunc sit amet elit ut odio posuere venenatis. Curabitur mattis, purus eu mattis mollis,
+          nulla quam consectetur massa, et tempus quam dui accumsan libero. Duis semper lorem quam. Donec nec vestibulum
+          eros. Proin sollicitudin maximus sem, ac elementum neque ornare a. Vestibulum consectetur mauris feugiat elit
+          euismod, eu commodo quam convallis. Morbi finibus nisi mattis justo egestas porttitor. Integer quis dolor sed
+          mauris feugiat interdum eget sit amet diam. Nulla dictum tellus convallis justo congue, et iaculis erat porta.
+        </p>
+      </section>
+      <section id="section-2-2">
+        <h3>Section 2</h3>
+        <p>Nulla tempus ligula non urna euismod hendrerit. Vestibulum egestas pretium suscipit. Nam sagittis justo ac
+          magna pellentesque, ut rutrum mauris eleifend. Vestibulum nisi risus, semper ut luctus dignissim, dignissim et
+          nibh. Nulla quis tincidunt erat, quis auctor libero. Suspendisse potenti. Morbi venenatis tristique vulputate.
+          Ut ut ullamcorper quam, vel auctor arcu. Fusce malesuada diam ac porttitor feugiat.</p>
+        <p>Mauris suscipit cursus arcu, ac elementum elit fermentum non. Aenean vitae convallis ante. Suspendisse
+          potenti. Proin faucibus, elit cursus aliquet hendrerit, metus lacus gravida purus, sed tempor tortor massa in
+          sem. Donec elementum at nisi at blandit. Nam accumsan bibendum dui, vel bibendum orci tincidunt pellentesque.
+          Proin consequat, libero eu sollicitudin lacinia, diam augue venenatis erat, sed pulvinar eros eros at nisl.
+          Nunc a placerat est. Aliquam facilisis vehicula nulla quis mattis. Ut tristique eros at finibus posuere. In
+          tempor, arcu vel facilisis commodo, lorem ante ultrices orci, ac faucibus neque leo eu leo. Aenean placerat mi
+          ac sollicitudin efficitur. Pellentesque nisi ante, tempor quis rutrum sed, tincidunt ac mauris. Vivamus
+          fringilla felis sed malesuada dictum. Ut tincidunt porta ipsum, eget scelerisque velit elementum id.</p>
+      </section>
+    </article>
+    <article id="article-3">
+      <h2>Article 3</h2>
+      <section id="section-3-1">
+        <h3>Section 1</h3>
+        <p>
+Fusce et elit laoreet, pharetra dui in, accumsan felis. Phasellus volutpat, nibh a tempor dapibus, nisi magna feugiat augue, in volutpat sapien eros ac est. Sed dui leo, laoreet sit amet est tincidunt, bibendum maximus massa. Nunc sit amet blandit ante. Proin accumsan varius orci et interdum. Aenean pharetra ligula ac enim ornare, non accumsan turpis dictum. In non tellus quis urna fermentum luctus. Aenean suscipit dignissim orci, ut tempus arcu congue vitae. Nam tincidunt lobortis dapibus. Donec suscipit et ipsum vel posuere. Suspendisse at ligula purus.
+</p>
+        <p>
+Etiam placerat, ante a lobortis pretium, ex dolor tincidunt magna, non ullamcorper quam nisi at tellus. Sed accumsan eleifend egestas. Donec scelerisque tellus eget lacus rhoncus, consectetur semper nulla mattis. Praesent justo arcu, facilisis non tortor semper, mollis tincidunt leo. Aenean malesuada at lectus eget scelerisque. Maecenas faucibus turpis eget blandit fringilla. Nunc nulla ligula, dignissim non faucibus at, suscipit vel felis. Cras condimentum suscipit turpis. Nullam dapibus venenatis pretium. Phasellus elementum, nulla sit amet tristique faucibus, justo massa laoreet lectus, non maximus nulla nibh eu ante. Aenean posuere, ligula et ullamcorper ullamcorper, nisi arcu mollis ligula, a bibendum justo lectus ut nisi. Fusce dictum dictum lacus, at auctor ex consequat quis. Aenean suscipit tincidunt dui vel iaculis.
+</p>
+      </section>
+      <section id="section-3-2">
+        <h3>Section 2</h3>
+<p>
+Fusce maximus libero quis scelerisque congue. Nam elementum elementum elementum. Nunc imperdiet, nunc ut porttitor aliquam, lacus neque ullamcorper elit, non commodo mi elit sit amet leo. Proin vehicula urna ac dui porta suscipit. Suspendisse non augue neque. Proin at fermentum libero, ut porttitor libero. Maecenas et pharetra felis. Curabitur quis porttitor mi. Integer convallis leo at quam ultrices volutpat.
+</p>
+<p>
+Duis ac odio eget sapien cursus auctor non a justo. Nunc aliquam nulla ante, sed facilisis sem ultrices et. Fusce sed pharetra mi. Vestibulum vitae est et augue iaculis sollicitudin id ac risus. Aliquam urna nunc, pretium tincidunt tristique sed, vestibulum id urna. Vivamus leo magna, congue sit amet odio quis, viverra imperdiet lectus. Curabitur ac libero velit. Proin gravida urna id ipsum volutpat accumsan. Sed lacinia risus sapien, ac feugiat augue gravida ac. Cras et lacinia purus. Nulla nunc lacus, maximus rhoncus interdum et, luctus eu nisl.
+</p>
+      </section>
+    </article>
+    <article id="article-4">
+      <h2>Article 4</h2>
+      <section id="section-4-1">
+        <h3>Section 1</h3>
+<p>
+Vestibulum ac sem massa. Nunc non finibus augue. Pellentesque scelerisque ipsum eu venenatis consectetur. Nullam nec sagittis velit. Vivamus faucibus lobortis aliquet. Duis commodo ex ac lacus sodales scelerisque. Integer ut dolor at ex lobortis viverra.
+</p>
+<p>
+Donec urna nisl, lacinia in tincidunt vel, blandit nec arcu. Phasellus eget ipsum a nisi pellentesque lacinia. Nullam vel metus euismod, pellentesque lectus vitae, pretium ante. Morbi lacinia purus ut leo volutpat, eu luctus lectus posuere. Aenean eget dolor ornare mi dictum imperdiet. Nunc porta eleifend mauris sed pellentesque. Ut a massa sit amet metus vestibulum malesuada ac non odio. Fusce sollicitudin consequat ex non bibendum. Proin dignissim vulputate nisl, porta congue mi tincidunt et. Nunc egestas aliquet blandit.
+</p>
+      </section>
+      <section id="section-4-2">
+        <h3>Section 2</h3>
+<p>
+In dolor sapien, pulvinar et odio quis, viverra dapibus justo. Fusce lacinia, dui a molestie iaculis, tortor ante vestibulum arcu, eu ultricies augue sapien in dolor. Integer posuere felis eget arcu dignissim maximus. Praesent vel mauris mattis, lacinia ipsum eget, vestibulum metus. Fusce tincidunt lorem vitae justo ultrices elementum. Quisque et rhoncus quam. Integer pretium pretium varius. Integer eget rhoncus risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh quam, eleifend id vestibulum ac, finibus quis ligula. Duis placerat turpis volutpat euismod luctus. Aenean sed libero aliquet, gravida quam nec, elementum magna. Nullam convallis, ante in maximus pharetra, ipsum est efficitur magna, eget pellentesque turpis nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+</p>
+<p>
+Pellentesque accumsan urna in malesuada commodo. Curabitur hendrerit tincidunt enim, non sollicitudin elit tempus sit amet. Mauris id dui vulputate, fermentum felis sed, tincidunt orci. Suspendisse mollis in tortor non tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam pellentesque massa turpis, quis scelerisque eros placerat sed. Cras sollicitudin eget lorem id faucibus. Fusce sit amet consequat eros, quis aliquet nunc. Phasellus iaculis convallis magna, a egestas nulla egestas nec. Fusce quis elit vitae nisi lacinia pellentesque vitae vel sapien. Nullam rutrum fermentum sapien a interdum. Sed euismod ex risus, non interdum ipsum elementum sit amet. Nullam sed erat pretium, vehicula nibh in, semper libero. Nulla sem est, fringilla non velit id, laoreet ultricies dolor.
+</p>
+      </section>
+    </article>
+    <article id="article-5">
+      <section id="section-5-1">
+<p>
+Sed vel purus vitae neque ornare commodo. Suspendisse interdum quis magna vel suscipit. Nullam id finibus massa. Nullam tincidunt at diam id pellentesque. Nulla vel mauris sollicitudin, aliquam urna quis, congue odio. Praesent rhoncus ante massa, eget vulputate diam finibus sit amet. Etiam sit amet felis vel libero sagittis venenatis at eget mi. Sed gravida augue eget odio lobortis feugiat. Donec tempor nec sapien eget laoreet. Proin at hendrerit odio. Nunc eget ipsum pharetra, suscipit risus sed, aliquam velit. Vestibulum egestas facilisis tortor ut sodales. Quisque vitae nisl sed ligula finibus dignissim.
+</p>
+      </section>
+      <section id="section-5-2">
+<p>
+Maecenas a elementum augue. Pellentesque libero neque, gravida ac sem non, viverra interdum risus. Nulla facilisis tortor mi, eu imperdiet sapien venenatis hendrerit. Nam blandit a neque eget malesuada. Proin ac ultrices neque, eu dignissim enim. Duis massa lacus, ullamcorper dapibus quam eu, lacinia egestas ex. Donec justo ex, convallis non velit eget, viverra scelerisque leo. Duis lorem orci, imperdiet suscipit dolor at, lacinia efficitur augue. Vestibulum sed pellentesque ante. Phasellus placerat, lacus tristique vehicula mattis, nibh ligula vulputate diam, sed dignissim quam nulla vitae magna. Etiam consectetur rhoncus quam eget ultricies. Fusce ac orci quis ex posuere tempor. Aenean nec ligula in tortor rhoncus aliquet at id mi. Nam dignissim ante id ipsum sagittis, nec congue purus pharetra.
+</p>
+      </section>
+    </article>
+  </main>
+</body>
+
+</html>

package/example/styles.css

@@ -0,0 +1,61 @@
+@font-face {
+  font-family: alex-brush;
+  src: url(https://fonts.cdnfonts.com/s/13498/AlexBrush-Regular.woff);
+}
+html {
+  --background: #efeff1;
+  --foreground: #fbfbfb;
+  --border: #dedde2;
+
+  --copy: #252329;
+  --copy-light: #645e6e;
+  --copy-lighter: #8a8495;
+
+  font-family: Arial, Helvetica, sans-serif;
+  font-size:16px;
+  line-height:1.5;
+  color:var(--copy);
+  scroll-behavior:smooth;
+  background-color: var(--background);
+}
+h1 {
+  font-family: alex-brush, sans-serif;
+  font-size:4rem;
+  text-align:center;
+}
+a {
+  color:var(--copy);
+}
+nav {
+  padding:0px 30px;
+  border-radius:5px;
+  border:1px solid var(--border);
+  background-color: var(--foreground);
+}
+main {
+  margin:auto;
+  max-width:80ch;
+}
+p {
+  text-align:left;
+  text-indent:2rem;
+  padding:10px;
+}
+access-settings{
+  &:nth-of-type(1) {
+    left:20%;
+  }
+  &:nth-of-type(2) {
+    left:40%;
+  }
+  &:nth-of-type(3) {
+    left:60%;
+    &::part(icon) {
+      background-color: brown;
+      fill:white;
+    }
+  }
+  &:nth-of-type(4) {
+    left:80%;
+  }
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "access-settings",
+  "version": "0.0.1",
+  "description": "web component for accessibility settings",
+  "main": "dist/index.js",
+  "scripts": {
+    "build-max": "esbuild src/index.js --bundle --outfile=dist/index.js",
+    "build-min": "esbuild src/index.js --bundle --minify --outfile=dist/index.min.js",
+    "build": "npm run build-max && npm run build-min",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YannickBochatay/access-settings.git"
+  },
+  "keywords": [
+    "accessiblity",
+    "webcomponent"
+  ],
+  "author": "Yannick Bochatay",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/YannickBochatay/access-settings/issues"
+  },
+  "homepage": "https://github.com/YannickBochatay/access-settings#readme",
+  "devDependencies": {
+    "esbuild": "0.27.2"
+  }
+}

package/src/createState.js

@@ -0,0 +1,34 @@
+export function createState(initialState) {
+
+  const listeners = [];
+
+  function createProxy(target) {
+    return new Proxy(target, {
+
+      set(target, prop, value) {
+        target[prop] = value;
+        listeners.forEach(callback => callback(String(prop), value));
+        return true;
+      },
+
+      get(target, prop) {
+        // from Chris Ferdinandi : https://gomakethings.com/guides/proxies/nesting/ 
+        if (prop === '_isProxy') return true;
+        if (target[prop]?._isProxy) return target[prop];
+        if (target[prop] && typeof target[prop] === 'object') return createProxy(target[prop]);
+        return target[prop];
+      },
+    });
+  }
+  
+  return {
+    state: createProxy(initialState),
+    onStateChange(callback) {
+      listeners.push(callback);
+    },
+    offStateChange(callback) {
+      const index = listeners.indexOf(callback);
+      if (index !== -1) listeners.splice(index, 1);
+    }
+  };
+}

package/src/globalStyles.js

@@ -0,0 +1,24 @@
+const globalStyles = document.createElement('style');
+
+globalStyles.innerHTML = `
+  @font-face {
+    font-family: open-dyslexic;
+    src: url(https://fonts.cdnfonts.com/s/29616/open-dyslexic.woff);
+  }
+  :root.dyslexic {
+    font-family:open-dyslexic, sans-serif;
+  }
+  :root.invertedColors {
+    filter:invert(1);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:has(access-settings[invert-colors], access-settings[all]) {
+      filter:invert(1);
+      &.invertedColors {
+        filter:invert(0);
+      }
+    }
+  }
+`;
+
+document.head.append(globalStyles);

package/src/index.js

@@ -0,0 +1,104 @@
+/**
+ * @license
+ * MIT License
+
+Copyright (c) 2026 Yannick Bochatay https://github.com/YannickBochatay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+**/
+
+import "./globalStyles.js"
+import { preferences, resetPrefs, onStateChange, offStateChange } from "./preferences.js"
+import { template } from "./template.js"
+import languages from "./languages.json" with { type: "json" };
+
+export class AccessSettings extends HTMLElement {
+
+  static languages = languages
+
+  #fontField
+  #colorsField
+  #fontSizeField
+  #lineHeightField
+  #observer
+
+  constructor() {
+    super();
+    const root = this.attachShadow({ mode : "open" });
+    root.append(template.content.cloneNode(true));
+
+    this.#fontField = root.querySelector("#dyslexic-font");
+    this.#colorsField = root.querySelector("#inverted-colors");
+    this.#fontSizeField = root.querySelector("#font-size");
+    this.#lineHeightField = root.querySelector("#line-height");
+
+    this.#fontField.addEventListener("change", e => preferences.dyslexicFont = e.target.checked);
+    this.#colorsField.addEventListener("change", e => preferences.invertedColors = e.target.checked);
+    this.#fontSizeField.addEventListener("change", e => preferences.fontSize = e.target.value);
+    this.#lineHeightField.addEventListener("change", e => preferences.lineHeight = e.target.value);
+
+    root.querySelector("#reset").addEventListener("click", resetPrefs);
+    root.querySelector("#close").addEventListener("click", () => {
+      root.querySelector("details").open = false;
+    });
+
+    this.#observer = new MutationObserver((mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.attributeName === 'lang') this.#handleLangChange();
+      }
+    });
+  }
+
+  #handleStateChange = () => {
+    this.#fontField.checked = preferences.dyslexicFont;
+    this.#colorsField.checked = preferences.invertedColors;
+    this.#fontSizeField.value = preferences.fontSize;
+    this.#lineHeightField.value = preferences.lineHeight;
+  }
+
+  #handleLangChange() {
+    const lang = document.documentElement.lang
+    const locale = this.constructor.languages[lang]
+    const labels = this.shadowRoot.querySelectorAll("label")
+
+    for (let label of labels) {
+      let key = label.getAttribute("for")
+      if (locale[key]) label.textContent = locale[key]
+    }
+
+    for (let id of ["close", "reset"]) {
+      this.shadowRoot.querySelector(`#${id}`).value = locale[id]
+    }
+  }
+
+  connectedCallback() {
+    this.#handleStateChange();
+    this.#handleLangChange();
+    onStateChange(this.#handleStateChange);
+    this.#observer.observe( document.documentElement, { attributes: true });
+  }
+
+  disconnectedCallback() {
+    offStateChange(this.#handleStateChange);
+    this.#observer.disconnect();
+  }
+}
+
+
+customElements.define('access-settings', AccessSettings);

package/src/languages.json

@@ -0,0 +1,18 @@
+{
+    "fr" : {
+      "dyslexic-font" : "Police dyslexie",
+      "inverted-colors" : "Couleurs inversées",
+      "font-size" : "Taille de police",
+      "line-height" : "Hauteur de ligne",
+      "reset" : "Réinitialiser",
+      "close" : "Terminer"
+    },
+    "en" : {
+      "dyslexic-font" : "Dyslexic font",
+      "inverted-colors" : "Inverted colors",
+      "font-size" : "Font size",
+      "line-height" : "Line height",
+      "reset" : "Reset",
+      "close" : "Close"
+    }
+  }