@oksigenia/access-panel 0.5.0 → 0.6.1

package/dist/web-component.js

@@ -60,6 +60,18 @@ function resolveEnabledControls(controlsAttr, excludeAttr) {
   }
   return enabled;
 }
+var NON_SCOPABLE_CONTROLS = [
+  "grayscale",
+  "reading-guide",
+  "reading-mask",
+  "big-cursor",
+  "colorblind"
+];
+function scopedControls(enabled) {
+  const out = new Set(enabled);
+  for (const id of NON_SCOPABLE_CONTROLS) out.delete(id);
+  return out;
+}
 function filterPresetForEnabled(id, enabled) {
   const out = {};
   for (const [k, v] of Object.entries(PRESETS[id])) {
@@ -360,30 +372,36 @@ function bindPanelBehavior(root, opts = {}) {
   }
   let state = loadState(storageKey);
   function applyState() {
-    const body = document.body;
+    const scoped = opts.scopeEl !== void 0;
+    const fxRoot = scoped ? opts.scopeEl ?? null : document.body;
     const rootEl = document.documentElement;
-    for (const cls of Array.from(body.classList)) {
-      if (cls.startsWith("oks-")) body.classList.remove(cls);
+    if (fxRoot) {
+      for (const cls of Array.from(fxRoot.classList)) {
+        if (cls.startsWith("oks-")) fxRoot.classList.remove(cls);
+      }
+    }
+    if (!scoped) [1, 2, 3].forEach((l) => rootEl.classList.remove(`oks-colorblind-${l}`));
+    if (fxRoot) {
+      if (state.zoom > 0) fxRoot.classList.add(`oks-zoom-${state.zoom}`);
+      if (state.lh > 0) fxRoot.classList.add(`oks-lh-${state.lh}`);
+      if (state.align > 0) fxRoot.classList.add(`oks-align-${state.align}`);
+      if (state.ls > 0) fxRoot.classList.add(`oks-ls-${state.ls}`);
+      if (state.font) fxRoot.classList.add("oks-a11y-font");
+      if (state.dyslexia) fxRoot.classList.add("oks-dyslexia");
+      if (state.contrast) fxRoot.classList.add("oks-a11y-contrast");
+      if (state.hideImages) fxRoot.classList.add("oks-a11y-hide");
+      if (state.highlightLinks) fxRoot.classList.add("oks-a11y-links");
+      if (state.pauseAnim) fxRoot.classList.add("oks-a11y-pause");
+      if (state.focusOutline) fxRoot.classList.add("oks-a11y-focus");
+      if (state.bigTargets) fxRoot.classList.add("oks-a11y-bigtargets");
+    }
+    if (!scoped) {
+      if (state.colorblind > 0) rootEl.classList.add(`oks-colorblind-${state.colorblind}`);
+      if (state.bigCursor) document.body.classList.add("oks-big-cursor");
+      if (state.readingGuide) document.body.classList.add("oks-a11y-guide");
+      if (state.readingMask) document.body.classList.add("oks-a11y-mask");
+      ensureOverlay().classList.toggle("is-active", state.grayOverlay);
     }
-    [1, 2, 3].forEach((l) => rootEl.classList.remove(`oks-colorblind-${l}`));
-    if (state.zoom > 0) body.classList.add(`oks-zoom-${state.zoom}`);
-    if (state.lh > 0) body.classList.add(`oks-lh-${state.lh}`);
-    if (state.align > 0) body.classList.add(`oks-align-${state.align}`);
-    if (state.ls > 0) body.classList.add(`oks-ls-${state.ls}`);
-    if (state.colorblind > 0) rootEl.classList.add(`oks-colorblind-${state.colorblind}`);
-    if (state.font) body.classList.add("oks-a11y-font");
-    if (state.dyslexia) body.classList.add("oks-dyslexia");
-    if (state.contrast) body.classList.add("oks-a11y-contrast");
-    if (state.hideImages) body.classList.add("oks-a11y-hide");
-    if (state.highlightLinks) body.classList.add("oks-a11y-links");
-    if (state.bigCursor) body.classList.add("oks-big-cursor");
-    if (state.pauseAnim) body.classList.add("oks-a11y-pause");
-    if (state.focusOutline) body.classList.add("oks-a11y-focus");
-    if (state.readingGuide) body.classList.add("oks-a11y-guide");
-    if (state.readingMask) body.classList.add("oks-a11y-mask");
-    if (state.bigTargets) body.classList.add("oks-a11y-bigtargets");
-    const overlay = ensureOverlay();
-    overlay.classList.toggle("is-active", state.grayOverlay);
     syncButtonsFromState();
     wrapper?.classList.toggle("has-active", !isStateEmpty(state));
   }
@@ -462,11 +480,24 @@ function bindPanelBehavior(root, opts = {}) {
   };
   let opener = null;
   let ignoreDocClose = false;
+  const positionScopedDialog = () => {
+    const el = opts.scopeEl;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) return;
+    const pad = 8;
+    panel.style.top = `${Math.max(pad, r.top + pad)}px`;
+    panel.style.bottom = "auto";
+    panel.style.left = `${r.left + r.width / 2}px`;
+    panel.style.right = "auto";
+    panel.style.transform = "translateX(-50%)";
+  };
   const openPanel = () => {
     if (panel.classList.contains("is-open")) return;
     opener = deepActiveElement();
     panel.classList.add("is-open");
     panel.removeAttribute("inert");
+    if (opts.scopeEl) positionScopedDialog();
     trigger?.setAttribute("aria-expanded", "true");
     ignoreDocClose = true;
     setTimeout(() => {
@@ -633,6 +664,13 @@ function bindPanelBehavior(root, opts = {}) {
   document.addEventListener("keydown", onKeyDown);
   document.addEventListener("mousemove", onMove);
   document.addEventListener("touchmove", onMove, { passive: true });
+  const onReposition = () => {
+    if (opts.scopeEl && panel.classList.contains("is-open")) positionScopedDialog();
+  };
+  if (opts.scopeEl !== void 0) {
+    window.addEventListener("scroll", onReposition, true);
+    window.addEventListener("resize", onReposition);
+  }
   if (nudgeMax > 0 && trigger) {
     loadNudge();
     applyNudge();
@@ -653,6 +691,10 @@ function bindPanelBehavior(root, opts = {}) {
     document.removeEventListener("keydown", onKeyDown);
     document.removeEventListener("mousemove", onMove);
     document.removeEventListener("touchmove", onMove);
+    if (opts.scopeEl !== void 0) {
+      window.removeEventListener("scroll", onReposition, true);
+      window.removeEventListener("resize", onReposition);
+    }
     trigger?.removeEventListener("pointerdown", onPointerDown);
     document.removeEventListener("pointermove", onPointerMove);
     document.removeEventListener("pointerup", onPointerUp);
@@ -959,18 +1001,22 @@ body.oks-ls-1 * { letter-spacing: 0.05em !important; }
 body.oks-ls-2 * { letter-spacing: 0.10em !important; }
 body.oks-ls-3 * { letter-spacing: 0.16em !important; }
 
+/* Focus highlight colour is themeable via --oks-focus-color (default #005fcc):
+   set it on :root for a dark theme so the highlight stays visible. The
+   persistent "all interactive" dashed derives a 45% tint from it; the glow can
+   be overridden on its own with --oks-focus-glow. */
 body.oks-a11y-focus a:not(oksigenia-access-panel):not(oksigenia-access-panel *),
 body.oks-a11y-focus button:not(oksigenia-access-panel):not(oksigenia-access-panel *),
 body.oks-a11y-focus input,
 body.oks-a11y-focus select,
 body.oks-a11y-focus textarea {
-  outline: 2px dashed rgba(0, 95, 204, 0.45) !important;
+  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
   outline-offset: 2px !important;
 }
 body.oks-a11y-focus *:focus-visible {
-  outline: 3px solid #005fcc !important;
+  outline: 3px solid var(--oks-focus-color, #005fcc) !important;
   outline-offset: 3px !important;
-  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;
+  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;
 }
 
 body.oks-a11y-contrast.oks-a11y-focus *:focus,
@@ -1069,6 +1115,80 @@ body.oks-a11y-bigtargets summary:not(oksigenia-access-panel):not(oksigenia-acces
   box-sizing: border-box !important;
 }
 `;
+function scopedEffectCss(s) {
+  return `
+${s}.oks-zoom-1 { font-size: 110% !important; }
+${s}.oks-zoom-2 { font-size: 120% !important; }
+${s}.oks-zoom-3 { font-size: 135% !important; }
+${s}.oks-zoom-4 { font-size: 150% !important; }
+
+${s}.oks-lh-1 * { line-height: 1.6 !important; }
+${s}.oks-lh-2 * { line-height: 1.9 !important; }
+${s}.oks-lh-3 * { line-height: 2.2 !important; }
+
+${s}.oks-a11y-font, ${s}.oks-a11y-font * { font-family: Arial, sans-serif !important; }
+
+${s}.oks-dyslexia * {
+  font-family: 'Comic Sans MS', 'Verdana', sans-serif !important;
+  letter-spacing: 0.05em !important;
+  word-spacing: 0.1em !important;
+  line-height: 1.6 !important;
+}
+
+${s}.oks-a11y-hide img { opacity: 0 !important; visibility: hidden !important; }
+${s}.oks-a11y-links a { text-decoration: underline !important; background: #ff0 !important; color: #000 !important; }
+
+${s}.oks-align-1 * { text-align: left !important; }
+${s}.oks-align-2 * { text-align: center !important; }
+${s}.oks-align-3 * { text-align: right !important; }
+
+${s}.oks-a11y-pause * { animation: none !important; transition: none !important; }
+
+${s}.oks-ls-1 * { letter-spacing: 0.05em !important; }
+${s}.oks-ls-2 * { letter-spacing: 0.10em !important; }
+${s}.oks-ls-3 * { letter-spacing: 0.16em !important; }
+
+${s}.oks-a11y-focus a,
+${s}.oks-a11y-focus button,
+${s}.oks-a11y-focus input,
+${s}.oks-a11y-focus select,
+${s}.oks-a11y-focus textarea {
+  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
+  outline-offset: 2px !important;
+}
+${s}.oks-a11y-focus *:focus-visible {
+  outline: 3px solid var(--oks-focus-color, #005fcc) !important;
+  outline-offset: 3px !important;
+  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;
+}
+
+${s}.oks-a11y-contrast, ${s}.oks-a11y-contrast * {
+  background-color: #000 !important;
+  color: #ff0 !important;
+  border-color: #ff0 !important;
+  text-shadow: none !important;
+  box-shadow: none !important;
+}
+${s}.oks-a11y-contrast img { filter: grayscale(100%) contrast(120%) !important; }
+${s}.oks-a11y-contrast a { color: #0ff !important; text-decoration: underline !important; }
+${s}.oks-a11y-contrast.oks-a11y-focus *:focus-visible {
+  outline-color: #0ff !important;
+  box-shadow: 0 0 0 6px rgba(0, 255, 255, 0.3) !important;
+}
+
+${s}.oks-a11y-bigtargets a,
+${s}.oks-a11y-bigtargets button,
+${s}.oks-a11y-bigtargets [role="button"],
+${s}.oks-a11y-bigtargets input[type="checkbox"],
+${s}.oks-a11y-bigtargets input[type="radio"],
+${s}.oks-a11y-bigtargets summary {
+  min-height: 44px !important;
+  min-width: 44px !important;
+  padding: 8px 12px !important;
+  box-sizing: border-box !important;
+}
+`;
+}
 
 // src/web-component.ts
 var OBSERVED = [
@@ -1082,7 +1202,8 @@ var OBSERVED = [
   "trigger",
   "effects-exclude",
   "nudge",
-  "presets"
+  "presets",
+  "scope"
 ];
 var STYLE_ID = "oksigenia-access-effects";
 var FILTERS_ID = "oksigenia-access-filters";
@@ -1135,6 +1256,7 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
   }
   _controller = null;
   _fxId = `oks-access-fx-${++fxSeq}`;
+  _scopeId = `oks-access-scope-${this._fxId.split("-").pop()}`;
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
@@ -1146,7 +1268,10 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
   disconnectedCallback() {
     this._controller?.();
     this._controller = null;
-    if (typeof document !== "undefined") document.getElementById(this._fxId)?.remove();
+    if (typeof document !== "undefined") {
+      document.getElementById(this._fxId)?.remove();
+      document.getElementById(this._scopeId)?.remove();
+    }
   }
   attributeChangedCallback() {
     if (this.isConnected) this.render();
@@ -1189,7 +1314,7 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
    *  drop the destructive filter from selectors the host marks as essential
    *  media (video, canvas, scientific imagery). Grayscale is handled by not
    *  offering the control (curation), not here. */
-  updateEffectsExclude() {
+  updateEffectsExclude(base) {
     if (typeof document === "undefined") return;
     const sel = (this.getAttribute("effects-exclude") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
     const existing = document.getElementById(this._fxId);
@@ -1203,7 +1328,24 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
       document.head.appendChild(style);
     }
     const list = sel.join(", ");
-    style.textContent = `body.oks-a11y-contrast :is(${list}), body.oks-a11y-contrast :is(${list}) * { filter: none !important; }`;
+    style.textContent = `${base}.oks-a11y-contrast :is(${list}), ${base}.oks-a11y-contrast :is(${list}) * { filter: none !important; }`;
+  }
+  /** Inject the per-instance scoped effect CSS (`scope=`): the scopable effects
+   *  anchored to the host's container instead of `body`, so several panels
+   *  regionalise their own zone without clobbering each other. */
+  updateScopeStyle(scope) {
+    if (typeof document === "undefined") return;
+    const existing = document.getElementById(this._scopeId);
+    if (!scope) {
+      existing?.remove();
+      return;
+    }
+    const style = existing ?? document.createElement("style");
+    if (!existing) {
+      style.id = this._scopeId;
+      document.head.appendChild(style);
+    }
+    style.textContent = scopedEffectCss(scope);
   }
   render() {
     const shadow = this.shadowRoot;
@@ -1211,7 +1353,9 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
     this._controller?.();
     const position = this.getPosition();
     const positionMobile = this.getPositionMobile();
-    const enabled = resolveEnabledControls(this.getAttribute("controls"), this.getAttribute("exclude"));
+    const scope = this.getAttribute("scope")?.trim() || null;
+    let enabled = resolveEnabledControls(this.getAttribute("controls"), this.getAttribute("exclude"));
+    if (scope) enabled = scopedControls(enabled);
     const showTrigger = this.getAttribute("trigger") !== "none";
     const showPresets = (this.getAttribute("presets") ?? "").trim().toLowerCase() !== "none";
     const html = buildPanelHtml({
@@ -1223,13 +1367,16 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
       showPresets
     });
     shadow.innerHTML = `<style>${PANEL_CSS}${positionCss(position, positionMobile)}</style>${html}`;
+    const scopeEl = scope ? document.querySelector(scope) : void 0;
     this._controller = bindPanelBehavior(shadow, {
       storageKey: this.getAttribute("storage-key") ?? void 0,
       locale: this.getLocale(),
       enabled,
-      nudgeMax: this.getNudgeMax()
+      nudgeMax: this.getNudgeMax(),
+      scopeEl
     });
-    this.updateEffectsExclude();
+    this.updateScopeStyle(scope);
+    this.updateEffectsExclude(scope ?? "body");
   }
 };
 if (typeof customElements !== "undefined" && !customElements.get("oksigenia-access-panel")) {