@oksigenia/access-panel 0.7.3 → 0.8.1

package/dist/web-component.d.ts

@@ -1,6 +1,11 @@
+import { b as PanelChangeDetail } from './behavior-CEe_YuMU.js';
+
 declare class OksigeniaAccessPanelElement extends HTMLElement {
     static get observedAttributes(): readonly string[];
     private _controller;
+    /** `initial-state` is read on the first render only: later re-renders
+     *  (another attribute changing) must not undo what the visitor did since. */
+    private _initialStateRead;
     private readonly _fxId;
     private readonly _scopeId;
     constructor();
@@ -33,6 +38,9 @@ declare global {
     interface HTMLElementTagNameMap {
         'oksigenia-access-panel': OksigeniaAccessPanelElement;
     }
+    interface HTMLElementEventMap {
+        'oksiac:change': CustomEvent<PanelChangeDetail>;
+    }
 }
 
 export { OksigeniaAccessPanelElement };

package/dist/web-component.js

@@ -283,14 +283,42 @@ var DEFAULT_STATE = Object.freeze({
   readingMask: false,
   bigTargets: false
 });
+var LEVEL_MAX = Object.freeze({
+  zoom: 4,
+  lh: 3,
+  align: 3,
+  ls: 3,
+  colorblind: 3
+});
+function sanitizeState(input) {
+  if (!input || typeof input !== "object" || Array.isArray(input)) return null;
+  const src = input;
+  const out = { ...DEFAULT_STATE };
+  for (const key of Object.keys(DEFAULT_STATE)) {
+    const v = src[key];
+    if (v === void 0) continue;
+    if (key in LEVEL_MAX) {
+      if (typeof v === "number" && Number.isInteger(v) && v >= 0 && v <= LEVEL_MAX[key]) {
+        out[key] = v;
+      }
+    } else if (v === true || v === 1) {
+      out[key] = true;
+    }
+  }
+  return out;
+}
+function parseState(json) {
+  if (json == null || json.trim() === "") return null;
+  try {
+    return sanitizeState(JSON.parse(json));
+  } catch {
+    return null;
+  }
+}
 function loadState(key) {
   try {
     if (typeof localStorage === "undefined") return { ...DEFAULT_STATE };
-    const raw = localStorage.getItem(key);
-    if (!raw) return { ...DEFAULT_STATE };
-    const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed !== "object") return { ...DEFAULT_STATE };
-    return { ...DEFAULT_STATE, ...parsed };
+    return parseState(localStorage.getItem(key)) ?? { ...DEFAULT_STATE };
   } catch {
     return { ...DEFAULT_STATE };
   }
@@ -385,7 +413,19 @@ function bindPanelBehavior(root, opts = {}) {
   if (!panel || !closeBtn || !resetBtn) {
     return noopController();
   }
-  let state = loadState(storageKey);
+  let state;
+  if (opts.initialState) {
+    state = { ...opts.initialState };
+    saveState(storageKey, state);
+  } else {
+    state = loadState(storageKey);
+  }
+  const emitChange = () => {
+    const host = root.host;
+    if (!host) return;
+    const detail = { state: { ...state } };
+    host.dispatchEvent(new CustomEvent("oksiac:change", { bubbles: true, composed: true, detail }));
+  };
   const scoped = opts.scopeEl !== void 0;
   const GLOBAL_KEY = "oksiac::global";
   const GLOBAL_MAP = [
@@ -561,11 +601,13 @@ function bindPanelBehavior(root, opts = {}) {
     }
     applyState();
     saveState(storageKey, state);
+    emitChange();
   };
   const onReset = () => {
     state = { ...DEFAULT_STATE };
     applyState();
     saveState(storageKey, state);
+    emitChange();
     if (scoped) {
       const cleared = { bigCursor: false, readingGuide: false, readingMask: false };
       saveGlobal(cleared);
@@ -939,7 +981,7 @@ var PANEL_CSS = `
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
-  color: #888;
+  color: #595959;
 }
 /* Screen-reader-only: keeps the category headings in the accessibility tree
    (flat scoped layout) while taking them out of the grid flow so they don't
@@ -1127,6 +1169,12 @@ 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; }
 
+/* Pages that declare a dark theme (Bootstrap 5.3's data-bs-theme, which Moodle
+   5.3's colour modes use, or data-theme): the default focus blue falls under 3:1
+   against a dark background, so the fallback moves to a lighter blue. An explicit
+   --oks-focus-color still wins. */
+html[data-bs-theme="dark"], html[data-theme="dark"] { --oks-focus-auto: #6ea8fe; }
+
 /* 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
@@ -1136,13 +1184,13 @@ body.oks-a11y-focus button:not(oksigenia-access-panel):not(oksigenia-access-pane
 body.oks-a11y-focus input,
 body.oks-a11y-focus select,
 body.oks-a11y-focus textarea {
-  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
+  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, var(--oks-focus-auto, #005fcc)) 45%, transparent) !important;
   outline-offset: 2px !important;
 }
 body.oks-a11y-focus *:focus-visible {
-  outline: 3px solid var(--oks-focus-color, #005fcc) !important;
+  outline: 3px solid var(--oks-focus-color, var(--oks-focus-auto, #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;
+  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, var(--oks-focus-auto, #005fcc)) 25%, transparent)) !important;
 }
 
 body.oks-a11y-contrast.oks-a11y-focus *:focus,
@@ -1249,7 +1297,8 @@ ${s}.oks-zoom-2 { font-size: 120% !important; }
 ${s}.oks-zoom-3 { font-size: 135% !important; }
 ${s}.oks-zoom-4 { font-size: 150% !important; }
 `;
-  return `${zoom}
+  return `html[data-bs-theme="dark"], html[data-theme="dark"] { --oks-focus-auto: #6ea8fe; }
+${zoom}
 ${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; }
@@ -1281,13 +1330,13 @@ ${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: 2px dashed color-mix(in srgb, var(--oks-focus-color, var(--oks-focus-auto, #005fcc)) 45%, transparent) !important;
   outline-offset: 2px !important;
 }
 ${s}.oks-a11y-focus *:focus-visible {
-  outline: 3px solid var(--oks-focus-color, #005fcc) !important;
+  outline: 3px solid var(--oks-focus-color, var(--oks-focus-auto, #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;
+  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, var(--oks-focus-auto, #005fcc)) 25%, transparent)) !important;
 }
 
 ${s}.oks-a11y-contrast, ${s}.oks-a11y-contrast * {
@@ -1383,6 +1432,9 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
     return OBSERVED;
   }
   _controller = null;
+  /** `initial-state` is read on the first render only: later re-renders
+   *  (another attribute changing) must not undo what the visitor did since. */
+  _initialStateRead = false;
   _fxId = `oks-access-fx-${++fxSeq}`;
   _scopeId = `oks-access-scope-${this._fxId.split("-").pop()}`;
   constructor() {
@@ -1498,12 +1550,15 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
     });
     shadow.innerHTML = `<style>${PANEL_CSS}${positionCss(position, positionMobile)}</style>${html}`;
     const scopeEl = scope ? document.querySelector(scope) : void 0;
+    const initialState = this._initialStateRead ? null : parseState(this.getAttribute("initial-state"));
+    this._initialStateRead = true;
     this._controller = bindPanelBehavior(shadow, {
       storageKey: this.getAttribute("storage-key") ?? void 0,
       locale: this.getLocale(),
       enabled,
       nudgeMax: this.getNudgeMax(),
-      scopeEl
+      scopeEl,
+      initialState
     });
     this.updateScopeStyle(scope);
     this.updateEffectsExclude(scope ?? "body");