@oksigenia/access-panel 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @oksigenia/access-panel
 
+## 0.7.0
+
+### Minor Changes
+
+- Two refinements to scoped panels (`scope=`):
+
+  **Window-level "global-offerable" controls.** Big cursor and the reading guide / mask can't be confined to a container, but they're benign window-level aids — so a scoped panel now offers them and applies them to the whole window, with a single shared state across every scoped instance and detached window. Toggle from any pane's pill and the cursor/guide/mask turns on window-wide while every pane's button reflects it; it persists as a window preference (synced same-document via an event and cross-window via the `storage` event), not under any one pane's `storage-key`. Grayscale and the colour-blind filter stay out of scoped panels (they destroy colour-coded data) — a scoped instance now drops only those two.
+
+  **Flat layout in scoped mode.** Curated/scoped panels looked sparse because each control category was its own grid, so controls from different categories couldn't share a row. Scoped panels now use a single flat grid; the category headings are kept screen-reader-only (out of the visual flow) so assistive tech keeps the structure, and the trailing button widens to fill any odd gap. The classic (non-scoped) panel is unchanged — it keeps its visible categories.
+
+  Both are scoped-mode only; they don't touch the classic panel or the WordPress/Moodle plugins.
+
+## 0.6.1
+
+### Patch Changes
+
+- Make the `focus` highlight colour themeable via `--oks-focus-color` (default `#005fcc`), with an optional `--oks-focus-glow` for the ring around the current element. The hardcoded blue could vanish on a dark theme; set the variable on `:root` for the global panel, or on the scope container for a scoped one (`scope=`), to keep the highlight visible. Custom properties inherit, so it composes with `scope=`. Default behaviour is unchanged, and high-contrast mode keeps its own cyan.
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -102,7 +102,9 @@ By default the panel adapts the whole page — which is what a normal content si
 
 The instance applies its effect classes to `#map-pane` instead of `body` and injects a stylesheet anchored to that selector. Mount one per pane (each with its own `storage-key`) and they coexist without clobbering each other. The dialog opens **over its own pane** (anchored to the scope's box, not a shared viewport corner), so each pane's panel reads as belonging to that pane.
 
-A scoped instance **auto-excludes** the controls that can't be confined to a container: the full-screen overlays (grayscale, reading guide, reading mask), the colour-blind root filter, and the window-level big cursor. If you need one of those globally, mount a separate non-scoped instance.
+A scoped instance **drops grayscale and the colour-blind filter** — they destroy colour-coded data, which is exactly what scoping protects. **Big cursor and the reading guide / mask** can't be confined to a container either, but they're benign window-level aids, so a scoped panel still offers them and applies them to the **whole window**, with a single shared state across every pane and detached window: toggle from any pane's button and the cursor/guide/mask turns on window-wide while every pane's button reflects it (persisted as a window preference, not per-pane).
+
+A scoped panel uses a **flat layout** — one grid, no visible category headings (they're kept screen-reader-only) — because curated per-pane panels look sparse when each category is its own grid. The classic (non-scoped) panel keeps its categories.
 
 Text size in scoped mode scales the container's `font-size`, so it scales `em`/inherited text inside the pane but **not `rem`** — `rem` is always relative to `<html>` and there is no CSS way to anchor it to a container. Size that pane's text in `em` if you want per-pane text scaling.
 
@@ -135,6 +137,17 @@ If you need to brand the panel itself, fork the package and customize
 `PANEL_CSS` — the building blocks are exported from
 `@oksigenia/access-panel`.
 
+### Focus highlight colour (for dark themes)
+
+The `focus` control highlights interactive elements with a blue that can vanish on a dark background. Override it with `--oks-focus-color` (and optionally `--oks-focus-glow` for the ring around the current element). Custom properties inherit, so set it where the effect applies — on `:root` for the global panel, or on the scope container for a scoped one:
+
+```css
+:root            { --oks-focus-color: #5ee0ff; }  /* dark theme, global   */
+#map-pane        { --oks-focus-color: #5ee0ff; }  /* dark theme, scope=   */
+```
+
+Default is `#005fcc`. The persistent "all interactive" outline derives a 45% tint from this colour; high-contrast mode overrides both to cyan on its own.
+
 ## Use it in Astro
 
 ```astro

package/dist/index.d.ts

@@ -90,13 +90,21 @@ declare const PRESET_IDS: readonly PresetId[];
  */
 declare function resolveEnabledControls(controlsAttr?: string | null, excludeAttr?: string | null): Set<ControlId>;
 /**
- * Controls that cannot be confined to a container (`scope=`): the full-screen
- * overlays (grayscale, reading guide, reading mask), the colour-blind root
- * `filter` on `<html>`, and the window-level big cursor. A scoped instance
- * auto-excludes these — a per-pane panel only offers what it can regionalise.
+ * Controls that can't be confined to a container AND shouldn't even be offered
+ * in a scoped panel: grayscale (a full-screen overlay that destroys colour
+ * data) and the colour-blind root `filter` (destroys data + the open
+ * simulation-vs-correction question). A scoped instance drops these entirely.
  */
 declare const NON_SCOPABLE_CONTROLS: readonly ControlId[];
-/** Remove the non-scopable controls from an enabled set (scoped mode). */
+/**
+ * Controls that can't be *scoped* but ARE benign window-level aids, so a scoped
+ * panel still offers them and applies them globally (to the whole window) with
+ * a shared, cross-instance state: big cursor and the reading guide / mask.
+ * Toggling from any pane affects the whole window and every pane's button
+ * reflects it. (Unlike grayscale/colour-blind, these don't falsify data.)
+ */
+declare const GLOBAL_OFFERABLE_CONTROLS: readonly ControlId[];
+/** Remove the controls a scoped instance doesn't offer at all (grayscale, colour-blind). */
 declare function scopedControls(enabled: Set<ControlId>): Set<ControlId>;
 
 type Position = 'top-left' | 'top-center' | 'top-right' | 'mid-left' | 'mid-center' | 'mid-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
@@ -114,6 +122,10 @@ interface RenderOptions {
      *  entirely. Defaults to true; individual presets still self-hide under the
      *  ≥2-control rule. */
     showPresets?: boolean;
+    /** Flat layout: one grid with screen-reader-only category headings instead of
+     *  visible per-category sections. Used in scoped mode, where heavily-curated
+     *  panels look sparse with category breaks. Defaults to false (classic). */
+    flatLayout?: boolean;
 }
 /**
  * HTML del panel completo (trigger + dialog). Pensado para inyectarse
@@ -155,8 +167,8 @@ interface PanelController {
  */
 declare function bindPanelBehavior(root: ShadowRoot, opts?: BehaviorOptions): PanelController;
 
-declare const PANEL_CSS = "\n:host {\n  --oks-btn-size: 55px;\n  --oks-bg: #000;\n  --oks-icon: #fff;\n  --oks-h-bg: #fff;\n  --oks-h-icon: #000;\n  --oks-z: 9999999;\n}\n.oks-access-wrapper {\n  position: fixed;\n  z-index: var(--oks-z);\n  line-height: 1;\n}\n.oks-access-btn {\n  width: var(--oks-btn-size);\n  height: var(--oks-btn-size);\n  border-radius: 50%;\n  background: var(--oks-bg);\n  color: var(--oks-icon);\n  border: 2px solid #fff;\n  box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: 0.2s;\n  padding: 0;\n}\n.oks-access-btn:hover {\n  background: var(--oks-h-bg);\n  color: var(--oks-h-icon);\n  transform: scale(1.1);\n}\n.oks-access-btn svg {\n  fill: currentColor;\n  display: block;\n  margin: 0 auto;\n  width: 60%;\n  height: 60%;\n}\n/* Porthole preset: a brushed-metal ring framing the standard glyph. The glyph\n   itself is untouched (discoverability), only the button gets the frame.\n   Hosts wanting a bespoke frame can target ::part(trigger) from light DOM. */\n.oks-access-btn[data-trigger-icon=\"porthole\"] {\n  box-shadow: 0 0 0 4px #b0bec5, 0 0 0 7px #546e7a, 0 6px 18px rgba(0,0,0,0.3);\n}\n.oks-active-badge {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  width: 20px;\n  height: 20px;\n  background: #25D366;\n  border-radius: 50%;\n  border: 2px solid #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  opacity: 0;\n  pointer-events: none;\n}\n.oks-active-badge svg { width: 12px; height: 12px; }\n.oks-access-wrapper.has-active .oks-active-badge { opacity: 1; }\n\n.oks-access-panel {\n  position: fixed;\n  width: 340px;\n  max-height: 90vh;\n  background: #fff;\n  border-radius: 20px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  z-index: var(--oks-z);\n  display: flex;\n  flex-direction: column;\n  opacity: 0;\n  pointer-events: none;\n  transition: 0.2s;\n  border: 1px solid rgba(0,0,0,0.1);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  color: #333;\n}\n.oks-access-panel.is-open { opacity: 1; pointer-events: all; }\n.oks-access-header {\n  padding: 15px 20px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.oks-access-header h3 { margin: 0; font-size: 18px; color: #000; }\n.oks-access-close {\n  background: #f0f0f0;\n  color: #333;\n  border: 1px solid #ddd;\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: 0.2s;\n  padding: 0;\n}\n.oks-access-close:hover { background: #e0e0e0; border-color: #ccc; }\n.oks-access-close svg { width: 24px; height: 24px; stroke-width: 2.5px; }\n.oks-access-content { padding: 0 20px 20px; overflow-y: auto; }\n.oks-access-title {\n  margin: 10px 0 5px;\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n  color: #888;\n}\n.oks-access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }\n.oks-access-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }\n.oks-preset {\n  background: #f0f4f8;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  padding: 8px 4px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n  font: inherit;\n  color: #333;\n  min-width: 0;\n  transition: 0.15s;\n}\n.oks-preset:hover { background: #000; color: #fff; }\n.oks-preset:focus-visible { outline: 2px solid #000; outline-offset: 2px; }\n/* Click feedback: a 250 ms flip + slight squeeze. Pure transient \u2014 the\n   button does not carry persistent active state because a preset is a\n   trigger, not a mode. */\n.oks-preset.is-flashing {\n  background: #000;\n  color: #fff;\n  transform: scale(0.96);\n}\n.oks-preset .oks-icon { font-size: 22px; margin-bottom: 4px; }\n.oks-preset .oks-icon svg { width: 20px; height: 20px; }\n.oks-preset .oks-label {\n  font-size: 10px; font-weight: 700; text-transform: uppercase;\n  text-align: center; line-height: 1.15;\n  overflow-wrap: anywhere; word-break: break-word;\n  /* Reserve room for 2 lines so 1-line labels (DISLEXIA, MOTOR) and\n     2-line labels (BAJA VISI\u00D3N, SIN DISTRAC.) end up the same height,\n     centred. Without this the row looks ragged. */\n  min-height: 2.3em;\n  display: flex; align-items: center; justify-content: center;\n}\n.oks-access-opt {\n  background: #f9f9f9;\n  border: 2px solid #eee;\n  border-radius: 10px;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 0;\n  min-height: 70px;\n  color: #333;\n  transition: 0.2s;\n  font: inherit;\n}\n.oks-access-opt.full-width { grid-column: span 2; }\n.oks-access-opt.is-active {\n  border-color: #000;\n  background: #fff;\n  box-shadow: 0 0 0 1px #000;\n}\n.oks-access-opt:hover { background: #000; color: #fff; border-color: #000; }\n.oks-icon { font-size: 28px; margin-bottom: 3px; display: block; line-height: 1; }\n.oks-icon svg { width: 24px; height: 24px; fill: currentColor; }\n.oks-label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.oks-levels { display: flex; gap: 3px; height: 5px; width: 50%; margin-top: 5px; }\n.oks-levels span { flex: 1; background: #ddd; border-radius: 3px; }\n.oks-access-opt[data-level=\"1\"] .oks-levels span:nth-child(1),\n.oks-access-opt[data-level=\"2\"] .oks-levels span:nth-child(-n+2),\n.oks-access-opt[data-level=\"3\"] .oks-levels span:nth-child(-n+3),\n.oks-access-opt[data-level=\"4\"] .oks-levels span:nth-child(-n+4) { background: #000; }\n.oks-access-opt:hover .oks-levels span { background: #555; }\n.oks-access-footer {\n  padding: 12px 20px;\n  border-top: 1px solid #eee;\n  text-align: center;\n}\n.oks-access-reset {\n  width: 100%;\n  padding: 8px;\n  border: 2px solid #000;\n  color: #000;\n  background: transparent;\n  font-weight: 700;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 12px;\n}\n.oks-access-reset:hover { background: #000; color: #fff; }\n.oks-access-branding { margin-top: 12px; font-size: 12px; color: #000; font-weight: 700; }\n.oks-access-branding a { color: #000; text-decoration: none; border-bottom: 1px dotted #000; }\n\n@media (prefers-reduced-motion: reduce) {\n  .oks-access-btn, .oks-access-panel, .oks-access-close,\n  .oks-preset, .oks-access-opt { transition: none; }\n  .oks-access-btn:hover { transform: scale(1); }\n  .oks-preset.is-flashing { transform: none; }\n}\n@media (max-width: 768px) {\n  .oks-access-panel {\n    width: 100%; height: 100%; max-height: 100%;\n    top: 0; left: 0; right: 0; bottom: 0;\n    border-radius: 0;\n  }\n  .oks-access-opt { min-height: 72px; padding: 10px 8px; }\n  .oks-icon svg { width: 26px; height: 26px; }\n  .oks-label { font-size: 12px; line-height: 1.25; }\n  .oks-access-grid { gap: 8px; }\n  .oks-access-content { padding: 0 14px 20px; }\n  .oks-access-title { font-size: 11px; margin: 10px 0 4px; }\n  /* Cursor grande no aplica en t\u00E1ctil: oculto y dejo el \u00FAltimo bot\u00F3n\n     de la secci\u00F3n ocupando 2 columnas para no romper la grilla par. */\n  .oks-access-opt[data-class=\"oks-big-cursor\"] { display: none; }\n  .oks-access-opt[data-class=\"oks-a11y-focus\"] { grid-column: span 2; }\n  .oks-access-reset { padding: 14px; font-size: 14px; }\n}\n";
-declare const EFFECT_CSS = "\nhtml.oks-colorblind-1 { filter: url('#oks-filter-protanopia'); }\nhtml.oks-colorblind-2 { filter: url('#oks-filter-deuteranopia'); }\nhtml.oks-colorblind-3 { filter: url('#oks-filter-tritanopia'); }\n\n/* Text-size levels.\n   Applied to <html> via :has(), not to <body>. rem is anchored to the root\n   element, so a site whose CSS sizes things in rem (most modern Astro / Tailwind\n   builds) needs the root font-size to change for the scale to take effect.\n   A previous version applied this to body with %, which only moved descendants\n   that inherited font-size from body \u2014 anything sized in rem stayed locked to\n   the 16px default of <html>. An even earlier version used the universal\n   selector with em and compounded the factor at every nesting level.\n   :has(body.oks-zoom-N) is the right anchor: one change at the root, rem\n   descendants scale exactly once. Hard-coded px is intentionally left alone;\n   browser zoom covers that case. */\nhtml:has(body.oks-zoom-1) { font-size: 110% !important; }\nhtml:has(body.oks-zoom-2) { font-size: 120% !important; }\nhtml:has(body.oks-zoom-3) { font-size: 135% !important; }\nhtml:has(body.oks-zoom-4) { font-size: 150% !important; }\n\nbody.oks-lh-1 * { line-height: 1.6 !important; }\nbody.oks-lh-2 * { line-height: 1.9 !important; }\nbody.oks-lh-3 * { line-height: 2.2 !important; }\n\nbody.oks-a11y-font { font-family: Arial, sans-serif !important; }\n\nbody.oks-dyslexia * {\n  font-family: 'Comic Sans MS', 'Verdana', sans-serif !important;\n  letter-spacing: 0.05em !important;\n  word-spacing: 0.1em !important;\n  line-height: 1.6 !important;\n}\n\nbody.oks-a11y-hide img { opacity: 0 !important; visibility: hidden !important; }\nbody.oks-a11y-links a { text-decoration: underline !important; background: #ff0 !important; color: #000 !important; }\n\nbody.oks-align-1 * { text-align: left !important; }\nbody.oks-align-2 * { text-align: center !important; }\nbody.oks-align-3 * { text-align: right !important; }\n\nbody.oks-a11y-pause * { animation: none !important; transition: none !important; }\n\nbody.oks-ls-1 * { letter-spacing: 0.05em !important; }\nbody.oks-ls-2 * { letter-spacing: 0.10em !important; }\nbody.oks-ls-3 * { letter-spacing: 0.16em !important; }\n\nbody.oks-a11y-focus a:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-focus button:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-focus input,\nbody.oks-a11y-focus select,\nbody.oks-a11y-focus textarea {\n  outline: 2px dashed rgba(0, 95, 204, 0.45) !important;\n  outline-offset: 2px !important;\n}\nbody.oks-a11y-focus *:focus-visible {\n  outline: 3px solid #005fcc !important;\n  outline-offset: 3px !important;\n  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;\n}\n\nbody.oks-a11y-contrast.oks-a11y-focus *:focus,\nbody.oks-a11y-contrast.oks-a11y-focus *:focus-visible {\n  outline-color: #0ff !important;\n  box-shadow: 0 0 0 6px rgba(0, 255, 255, 0.3) !important;\n}\n\n@media (pointer: fine) {\n  body.oks-big-cursor, body.oks-big-cursor a, body.oks-big-cursor button {\n    cursor: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2L4 18L8 14L11 21L14 19.5L11 13L15.5 13Z' stroke='white' stroke-width='4' stroke-linejoin='round' fill='white'/%3E%3Cpath d='M4 2L4 18L8 14L11 21L14 19.5L11 13L15.5 13Z' fill='black'/%3E%3C/svg%3E\") 8 4, auto !important;\n  }\n}\n\nbody.oks-a11y-contrast,\nbody.oks-a11y-contrast *:not(oksigenia-access-panel):not(oksigenia-access-panel *) {\n  background-color: #000 !important;\n  color: #ff0 !important;\n  border-color: #ff0 !important;\n  text-shadow: none !important;\n  box-shadow: none !important;\n}\nbody.oks-a11y-contrast img { filter: grayscale(100%) contrast(120%) !important; }\nbody.oks-a11y-contrast a:not(oksigenia-access-panel *) { color: #0ff !important; text-decoration: underline !important; }\n\n/* High-contrast applies background:#000 to every descendant of body to flip\n   the page to inverted colours. That selector also catches our own overlays\n   (.oks-reading-guide, .oks-overlay-effect), which would then paint a solid\n   black band on top of the text and defeat their purpose. Restore the\n   overlay-specific values here so they keep working in high-contrast mode. */\nbody.oks-a11y-contrast .oks-reading-guide {\n  background-color: rgba(255, 255, 0, 0.25) !important;\n  border-top-color: #ff0 !important;\n  border-bottom-color: #ff0 !important;\n}\nbody.oks-a11y-contrast .oks-overlay-effect {\n  background-color: transparent !important;\n}\n\n.oks-overlay-effect {\n  position: fixed; top: 0; left: 0;\n  width: 100%; height: 100%;\n  pointer-events: none;\n  z-index: 999990;\n  display: none;\n  backdrop-filter: grayscale(100%);\n}\n.oks-overlay-effect.is-active { display: block; }\n\n.oks-reading-guide {\n  position: fixed; left: 0;\n  width: 100%; height: 50px;\n  background: rgba(255, 255, 0, 0.2);\n  border-top: 3px solid red;\n  border-bottom: 3px solid red;\n  pointer-events: none;\n  z-index: 2147483647;\n  display: none;\n  transform: translateY(-50%);\n}\nbody.oks-a11y-guide .oks-reading-guide { display: block; }\n\n/* Reading mask: dark overlay leaving a horizontal band lit around the cursor.\n   --oks-mask-y is updated from JS on mousemove; band is \u00B190px around it. */\n.oks-reading-mask {\n  position: fixed; top: 0; left: 0;\n  width: 100vw; height: 100vh;\n  pointer-events: none;\n  z-index: 2147483646;\n  background: rgba(0, 0, 0, 0.75);\n  display: none;\n  clip-path: polygon(\n    0 0, 100% 0,\n    100% calc(var(--oks-mask-y, 50vh) - 90px),\n    0    calc(var(--oks-mask-y, 50vh) - 90px),\n    0    calc(var(--oks-mask-y, 50vh) + 90px),\n    100% calc(var(--oks-mask-y, 50vh) + 90px),\n    100% 100%, 0 100%\n  );\n}\nbody.oks-a11y-mask .oks-reading-mask { display: block; }\nbody.oks-a11y-contrast .oks-reading-mask { background-color: rgba(0, 0, 0, 0.85) !important; }\n\n/* Big targets: bump interactive hit-areas to WCAG 2.5.5 (44\u00D744 minimum).\n   Only adjusts padding + min-* \u2014 never display, so layouts that rely on\n   inline flow or grid placement survive. Exempts our own shadow-DOM host. */\nbody.oks-a11y-bigtargets a:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets button:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets [role=\"button\"]:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets input[type=\"checkbox\"]:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets input[type=\"radio\"]:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets summary:not(oksigenia-access-panel):not(oksigenia-access-panel *) {\n  min-height: 44px !important;\n  min-width: 44px !important;\n  padding: 8px 12px !important;\n  box-sizing: border-box !important;\n}\n";
+declare const PANEL_CSS = "\n:host {\n  --oks-btn-size: 55px;\n  --oks-bg: #000;\n  --oks-icon: #fff;\n  --oks-h-bg: #fff;\n  --oks-h-icon: #000;\n  --oks-z: 9999999;\n}\n.oks-access-wrapper {\n  position: fixed;\n  z-index: var(--oks-z);\n  line-height: 1;\n}\n.oks-access-btn {\n  width: var(--oks-btn-size);\n  height: var(--oks-btn-size);\n  border-radius: 50%;\n  background: var(--oks-bg);\n  color: var(--oks-icon);\n  border: 2px solid #fff;\n  box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: 0.2s;\n  padding: 0;\n}\n.oks-access-btn:hover {\n  background: var(--oks-h-bg);\n  color: var(--oks-h-icon);\n  transform: scale(1.1);\n}\n.oks-access-btn svg {\n  fill: currentColor;\n  display: block;\n  margin: 0 auto;\n  width: 60%;\n  height: 60%;\n}\n/* Porthole preset: a brushed-metal ring framing the standard glyph. The glyph\n   itself is untouched (discoverability), only the button gets the frame.\n   Hosts wanting a bespoke frame can target ::part(trigger) from light DOM. */\n.oks-access-btn[data-trigger-icon=\"porthole\"] {\n  box-shadow: 0 0 0 4px #b0bec5, 0 0 0 7px #546e7a, 0 6px 18px rgba(0,0,0,0.3);\n}\n.oks-active-badge {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  width: 20px;\n  height: 20px;\n  background: #25D366;\n  border-radius: 50%;\n  border: 2px solid #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  opacity: 0;\n  pointer-events: none;\n}\n.oks-active-badge svg { width: 12px; height: 12px; }\n.oks-access-wrapper.has-active .oks-active-badge { opacity: 1; }\n\n.oks-access-panel {\n  position: fixed;\n  width: 340px;\n  max-height: 90vh;\n  background: #fff;\n  border-radius: 20px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  z-index: var(--oks-z);\n  display: flex;\n  flex-direction: column;\n  opacity: 0;\n  pointer-events: none;\n  transition: 0.2s;\n  border: 1px solid rgba(0,0,0,0.1);\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  color: #333;\n}\n.oks-access-panel.is-open { opacity: 1; pointer-events: all; }\n.oks-access-header {\n  padding: 15px 20px;\n  border-bottom: 1px solid #eee;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.oks-access-header h3 { margin: 0; font-size: 18px; color: #000; }\n.oks-access-close {\n  background: #f0f0f0;\n  color: #333;\n  border: 1px solid #ddd;\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: 0.2s;\n  padding: 0;\n}\n.oks-access-close:hover { background: #e0e0e0; border-color: #ccc; }\n.oks-access-close svg { width: 24px; height: 24px; stroke-width: 2.5px; }\n.oks-access-content { padding: 0 20px 20px; overflow-y: auto; }\n.oks-access-title {\n  margin: 10px 0 5px;\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n  color: #888;\n}\n/* Screen-reader-only: keeps the category headings in the accessibility tree\n   (flat scoped layout) while taking them out of the grid flow so they don't\n   force a visual row break or occupy a cell. */\n.oks-sr-only {\n  position: absolute !important;\n  width: 1px; height: 1px;\n  margin: 0; padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n.oks-access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }\n.oks-access-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }\n.oks-preset {\n  background: #f0f4f8;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  padding: 8px 4px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n  font: inherit;\n  color: #333;\n  min-width: 0;\n  transition: 0.15s;\n}\n.oks-preset:hover { background: #000; color: #fff; }\n.oks-preset:focus-visible { outline: 2px solid #000; outline-offset: 2px; }\n/* Click feedback: a 250 ms flip + slight squeeze. Pure transient \u2014 the\n   button does not carry persistent active state because a preset is a\n   trigger, not a mode. */\n.oks-preset.is-flashing {\n  background: #000;\n  color: #fff;\n  transform: scale(0.96);\n}\n.oks-preset .oks-icon { font-size: 22px; margin-bottom: 4px; }\n.oks-preset .oks-icon svg { width: 20px; height: 20px; }\n.oks-preset .oks-label {\n  font-size: 10px; font-weight: 700; text-transform: uppercase;\n  text-align: center; line-height: 1.15;\n  overflow-wrap: anywhere; word-break: break-word;\n  /* Reserve room for 2 lines so 1-line labels (DISLEXIA, MOTOR) and\n     2-line labels (BAJA VISI\u00D3N, SIN DISTRAC.) end up the same height,\n     centred. Without this the row looks ragged. */\n  min-height: 2.3em;\n  display: flex; align-items: center; justify-content: center;\n}\n.oks-access-opt {\n  background: #f9f9f9;\n  border: 2px solid #eee;\n  border-radius: 10px;\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 0;\n  min-height: 70px;\n  color: #333;\n  transition: 0.2s;\n  font: inherit;\n}\n.oks-access-opt.full-width { grid-column: span 2; }\n.oks-access-opt.is-active {\n  border-color: #000;\n  background: #fff;\n  box-shadow: 0 0 0 1px #000;\n}\n.oks-access-opt:hover { background: #000; color: #fff; border-color: #000; }\n.oks-icon { font-size: 28px; margin-bottom: 3px; display: block; line-height: 1; }\n.oks-icon svg { width: 24px; height: 24px; fill: currentColor; }\n.oks-label {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 1.2;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n.oks-levels { display: flex; gap: 3px; height: 5px; width: 50%; margin-top: 5px; }\n.oks-levels span { flex: 1; background: #ddd; border-radius: 3px; }\n.oks-access-opt[data-level=\"1\"] .oks-levels span:nth-child(1),\n.oks-access-opt[data-level=\"2\"] .oks-levels span:nth-child(-n+2),\n.oks-access-opt[data-level=\"3\"] .oks-levels span:nth-child(-n+3),\n.oks-access-opt[data-level=\"4\"] .oks-levels span:nth-child(-n+4) { background: #000; }\n.oks-access-opt:hover .oks-levels span { background: #555; }\n.oks-access-footer {\n  padding: 12px 20px;\n  border-top: 1px solid #eee;\n  text-align: center;\n}\n.oks-access-reset {\n  width: 100%;\n  padding: 8px;\n  border: 2px solid #000;\n  color: #000;\n  background: transparent;\n  font-weight: 700;\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 12px;\n}\n.oks-access-reset:hover { background: #000; color: #fff; }\n.oks-access-branding { margin-top: 12px; font-size: 12px; color: #000; font-weight: 700; }\n.oks-access-branding a { color: #000; text-decoration: none; border-bottom: 1px dotted #000; }\n\n@media (prefers-reduced-motion: reduce) {\n  .oks-access-btn, .oks-access-panel, .oks-access-close,\n  .oks-preset, .oks-access-opt { transition: none; }\n  .oks-access-btn:hover { transform: scale(1); }\n  .oks-preset.is-flashing { transform: none; }\n}\n@media (max-width: 768px) {\n  .oks-access-panel {\n    width: 100%; height: 100%; max-height: 100%;\n    top: 0; left: 0; right: 0; bottom: 0;\n    border-radius: 0;\n  }\n  .oks-access-opt { min-height: 72px; padding: 10px 8px; }\n  .oks-icon svg { width: 26px; height: 26px; }\n  .oks-label { font-size: 12px; line-height: 1.25; }\n  .oks-access-grid { gap: 8px; }\n  .oks-access-content { padding: 0 14px 20px; }\n  .oks-access-title { font-size: 11px; margin: 10px 0 4px; }\n  /* Cursor grande no aplica en t\u00E1ctil: oculto y dejo el \u00FAltimo bot\u00F3n\n     de la secci\u00F3n ocupando 2 columnas para no romper la grilla par. */\n  .oks-access-opt[data-class=\"oks-big-cursor\"] { display: none; }\n  .oks-access-opt[data-class=\"oks-a11y-focus\"] { grid-column: span 2; }\n  .oks-access-reset { padding: 14px; font-size: 14px; }\n}\n";
+declare const EFFECT_CSS = "\nhtml.oks-colorblind-1 { filter: url('#oks-filter-protanopia'); }\nhtml.oks-colorblind-2 { filter: url('#oks-filter-deuteranopia'); }\nhtml.oks-colorblind-3 { filter: url('#oks-filter-tritanopia'); }\n\n/* Text-size levels.\n   Applied to <html> via :has(), not to <body>. rem is anchored to the root\n   element, so a site whose CSS sizes things in rem (most modern Astro / Tailwind\n   builds) needs the root font-size to change for the scale to take effect.\n   A previous version applied this to body with %, which only moved descendants\n   that inherited font-size from body \u2014 anything sized in rem stayed locked to\n   the 16px default of <html>. An even earlier version used the universal\n   selector with em and compounded the factor at every nesting level.\n   :has(body.oks-zoom-N) is the right anchor: one change at the root, rem\n   descendants scale exactly once. Hard-coded px is intentionally left alone;\n   browser zoom covers that case. */\nhtml:has(body.oks-zoom-1) { font-size: 110% !important; }\nhtml:has(body.oks-zoom-2) { font-size: 120% !important; }\nhtml:has(body.oks-zoom-3) { font-size: 135% !important; }\nhtml:has(body.oks-zoom-4) { font-size: 150% !important; }\n\nbody.oks-lh-1 * { line-height: 1.6 !important; }\nbody.oks-lh-2 * { line-height: 1.9 !important; }\nbody.oks-lh-3 * { line-height: 2.2 !important; }\n\nbody.oks-a11y-font { font-family: Arial, sans-serif !important; }\n\nbody.oks-dyslexia * {\n  font-family: 'Comic Sans MS', 'Verdana', sans-serif !important;\n  letter-spacing: 0.05em !important;\n  word-spacing: 0.1em !important;\n  line-height: 1.6 !important;\n}\n\nbody.oks-a11y-hide img { opacity: 0 !important; visibility: hidden !important; }\nbody.oks-a11y-links a { text-decoration: underline !important; background: #ff0 !important; color: #000 !important; }\n\nbody.oks-align-1 * { text-align: left !important; }\nbody.oks-align-2 * { text-align: center !important; }\nbody.oks-align-3 * { text-align: right !important; }\n\nbody.oks-a11y-pause * { animation: none !important; transition: none !important; }\n\nbody.oks-ls-1 * { letter-spacing: 0.05em !important; }\nbody.oks-ls-2 * { letter-spacing: 0.10em !important; }\nbody.oks-ls-3 * { letter-spacing: 0.16em !important; }\n\n/* Focus highlight colour is themeable via --oks-focus-color (default #005fcc):\n   set it on :root for a dark theme so the highlight stays visible. The\n   persistent \"all interactive\" dashed derives a 45% tint from it; the glow can\n   be overridden on its own with --oks-focus-glow. */\nbody.oks-a11y-focus a:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-focus button:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-focus input,\nbody.oks-a11y-focus select,\nbody.oks-a11y-focus textarea {\n  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;\n  outline-offset: 2px !important;\n}\nbody.oks-a11y-focus *:focus-visible {\n  outline: 3px solid var(--oks-focus-color, #005fcc) !important;\n  outline-offset: 3px !important;\n  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;\n}\n\nbody.oks-a11y-contrast.oks-a11y-focus *:focus,\nbody.oks-a11y-contrast.oks-a11y-focus *:focus-visible {\n  outline-color: #0ff !important;\n  box-shadow: 0 0 0 6px rgba(0, 255, 255, 0.3) !important;\n}\n\n@media (pointer: fine) {\n  body.oks-big-cursor, body.oks-big-cursor a, body.oks-big-cursor button {\n    cursor: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2L4 18L8 14L11 21L14 19.5L11 13L15.5 13Z' stroke='white' stroke-width='4' stroke-linejoin='round' fill='white'/%3E%3Cpath d='M4 2L4 18L8 14L11 21L14 19.5L11 13L15.5 13Z' fill='black'/%3E%3C/svg%3E\") 8 4, auto !important;\n  }\n}\n\nbody.oks-a11y-contrast,\nbody.oks-a11y-contrast *:not(oksigenia-access-panel):not(oksigenia-access-panel *) {\n  background-color: #000 !important;\n  color: #ff0 !important;\n  border-color: #ff0 !important;\n  text-shadow: none !important;\n  box-shadow: none !important;\n}\nbody.oks-a11y-contrast img { filter: grayscale(100%) contrast(120%) !important; }\nbody.oks-a11y-contrast a:not(oksigenia-access-panel *) { color: #0ff !important; text-decoration: underline !important; }\n\n/* High-contrast applies background:#000 to every descendant of body to flip\n   the page to inverted colours. That selector also catches our own overlays\n   (.oks-reading-guide, .oks-overlay-effect), which would then paint a solid\n   black band on top of the text and defeat their purpose. Restore the\n   overlay-specific values here so they keep working in high-contrast mode. */\nbody.oks-a11y-contrast .oks-reading-guide {\n  background-color: rgba(255, 255, 0, 0.25) !important;\n  border-top-color: #ff0 !important;\n  border-bottom-color: #ff0 !important;\n}\nbody.oks-a11y-contrast .oks-overlay-effect {\n  background-color: transparent !important;\n}\n\n.oks-overlay-effect {\n  position: fixed; top: 0; left: 0;\n  width: 100%; height: 100%;\n  pointer-events: none;\n  z-index: 999990;\n  display: none;\n  backdrop-filter: grayscale(100%);\n}\n.oks-overlay-effect.is-active { display: block; }\n\n.oks-reading-guide {\n  position: fixed; left: 0;\n  width: 100%; height: 50px;\n  background: rgba(255, 255, 0, 0.2);\n  border-top: 3px solid red;\n  border-bottom: 3px solid red;\n  pointer-events: none;\n  z-index: 2147483647;\n  display: none;\n  transform: translateY(-50%);\n}\nbody.oks-a11y-guide .oks-reading-guide { display: block; }\n\n/* Reading mask: dark overlay leaving a horizontal band lit around the cursor.\n   --oks-mask-y is updated from JS on mousemove; band is \u00B190px around it. */\n.oks-reading-mask {\n  position: fixed; top: 0; left: 0;\n  width: 100vw; height: 100vh;\n  pointer-events: none;\n  z-index: 2147483646;\n  background: rgba(0, 0, 0, 0.75);\n  display: none;\n  clip-path: polygon(\n    0 0, 100% 0,\n    100% calc(var(--oks-mask-y, 50vh) - 90px),\n    0    calc(var(--oks-mask-y, 50vh) - 90px),\n    0    calc(var(--oks-mask-y, 50vh) + 90px),\n    100% calc(var(--oks-mask-y, 50vh) + 90px),\n    100% 100%, 0 100%\n  );\n}\nbody.oks-a11y-mask .oks-reading-mask { display: block; }\nbody.oks-a11y-contrast .oks-reading-mask { background-color: rgba(0, 0, 0, 0.85) !important; }\n\n/* Big targets: bump interactive hit-areas to WCAG 2.5.5 (44\u00D744 minimum).\n   Only adjusts padding + min-* \u2014 never display, so layouts that rely on\n   inline flow or grid placement survive. Exempts our own shadow-DOM host. */\nbody.oks-a11y-bigtargets a:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets button:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets [role=\"button\"]:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets input[type=\"checkbox\"]:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets input[type=\"radio\"]:not(oksigenia-access-panel):not(oksigenia-access-panel *),\nbody.oks-a11y-bigtargets summary:not(oksigenia-access-panel):not(oksigenia-access-panel *) {\n  min-height: 44px !important;\n  min-width: 44px !important;\n  padding: 8px 12px !important;\n  box-sizing: border-box !important;\n}\n";
 /**
  * Scoped-mode effect CSS (#scope). Emits only the controls that can be confined
  * to a container by selector — the same rules as EFFECT_CSS but anchored to the
@@ -175,4 +187,4 @@ declare const EFFECT_CSS = "\nhtml.oks-colorblind-1 { filter: url('#oks-filter-p
  */
 declare function scopedEffectCss(s: string): string;
 
-export { ALL_CONTROLS, type BehaviorOptions, COLORBLIND_FILTERS_SVG, type ControlId, DEFAULT_STATE, EFFECT_CSS, type LocaleCode, NON_SCOPABLE_CONTROLS, PANEL_CSS, PRESETS, PRESET_IDS, type PanelController, type PanelState, type Position, type PresetId, type Translation, type TriggerIcon, bindPanelBehavior, buildPanelHtml, getTranslation, isStateEmpty, loadState, positionCss, resolveEnabledControls, saveState, scopedControls, scopedEffectCss, supportedLocales };
+export { ALL_CONTROLS, type BehaviorOptions, COLORBLIND_FILTERS_SVG, type ControlId, DEFAULT_STATE, EFFECT_CSS, GLOBAL_OFFERABLE_CONTROLS, type LocaleCode, NON_SCOPABLE_CONTROLS, PANEL_CSS, PRESETS, PRESET_IDS, type PanelController, type PanelState, type Position, type PresetId, type Translation, type TriggerIcon, bindPanelBehavior, buildPanelHtml, getTranslation, isStateEmpty, loadState, positionCss, resolveEnabledControls, saveState, scopedControls, scopedEffectCss, supportedLocales };

package/dist/index.js

@@ -110,12 +110,11 @@ function resolveEnabledControls(controlsAttr, excludeAttr) {
   }
   return enabled;
 }
-var NON_SCOPABLE_CONTROLS = [
-  "grayscale",
-  "reading-guide",
-  "reading-mask",
+var NON_SCOPABLE_CONTROLS = ["grayscale", "colorblind"];
+var GLOBAL_OFFERABLE_CONTROLS = [
   "big-cursor",
-  "colorblind"
+  "reading-guide",
+  "reading-mask"
 ];
 function scopedControls(enabled) {
   const out = new Set(enabled);
@@ -145,6 +144,7 @@ function buildPanelHtml(opts) {
   const enabled = opts.enabled ?? new Set(ALL_CONTROLS);
   const showTrigger = opts.showTrigger ?? true;
   const showPresets = opts.showPresets ?? true;
+  const flatLayout = opts.flatLayout ?? false;
   const trig = TRIGGER_ICONS[triggerIcon];
   const multi = (id, prefix, levels, label, icon, full = false) => {
     if (!enabled.has(id)) return "";
@@ -179,44 +179,61 @@ function buildPanelHtml(opts) {
   };
   const presetButtons = showPresets ? PRESET_IDS.filter((id) => presetIsAvailable(id, enabled)).map((id) => preset(id, presetLabels[id])) : [];
   const presetsBlock = presetButtons.length ? `<h4 class="oks-access-title">${escapeHtml(t.presets)}</h4><div class="oks-access-presets">${presetButtons.join("")}</div>` : "";
-  const triggerBlock = showTrigger ? `
-<div class="oks-access-wrapper" id="oks-wrapper" data-position="${opts.position}">
-  <button class="oks-access-btn" id="oks-trigger" part="trigger" data-trigger-icon="${triggerIcon}" aria-label="${escapeAttr(t.title)}" aria-expanded="false" aria-controls="oks-panel" type="button">
-    ${trig}
-  </button>
-  <span class="oks-active-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><polyline points="20 6 9 17 4 12"/></svg></span>
-</div>` : "";
-  return `${triggerBlock}
-<div class="oks-access-panel" id="oks-panel" role="dialog" aria-modal="true" aria-labelledby="oks-panel-title" inert>
-  <div class="oks-access-header">
-    <h3 id="oks-panel-title">${escapeHtml(t.title)}</h3>
-    <button class="oks-access-close" id="oks-close" aria-label="${escapeAttr(t.close)}" type="button">${ICON_CLOSE}</button>
-  </div>
-  <div class="oks-access-content">
-    ${presetsBlock}
-    ${section(t.txt, [
+  const textBtns = [
     multi("text-size", "oks-zoom", 4, t.size, ICON_TXT),
     multi("line-height", "oks-lh", 3, t.lh, ICON_LH),
     multi("text-align", "oks-align", 3, t.align, ICON_ALIGN),
     toggle("readable-font", "oks-a11y-font", t.font, ICON_FONT),
     toggle("dyslexia-font", "oks-dyslexia", t.dyslexia, ICON_DYSLEXIA),
     multi("letter-spacing", "oks-ls", 3, t.ls, ICON_LS)
-  ])}
-    ${section(t.vis, [
+  ];
+  const visBtns = [
     toggle("contrast", "oks-a11y-contrast", t.contrast, ICON_CONTRAST),
     overlay("grayscale", "oks-overlay-gray", t.gray, ICON_GRAY),
     toggle("hide-images", "oks-a11y-hide", t.hide, ICON_HIDE),
     toggle("highlight-links", "oks-a11y-links", t.links, ICON_LINK),
-    multi("colorblind", "oks-colorblind", 3, t.cb, ICON_COLORBLIND, true)
-  ])}
-    ${section(t.ori, [
+    multi("colorblind", "oks-colorblind", 3, t.cb, ICON_COLORBLIND, !flatLayout)
+  ];
+  const oriBtns = [
     simple("reading-guide", "guide", t.guide, ICON_GUIDE),
     simple("reading-mask", "mask", t.mask, ICON_MASK),
     toggle("big-cursor", "oks-big-cursor", t.cursor, ICON_CURSOR),
     toggle("big-targets", "oks-a11y-bigtargets", t.targets, ICON_TARGETS),
     toggle("pause-anim", "oks-a11y-pause", t.pause, ICON_PAUSE),
     toggle("focus", "oks-a11y-focus", t.focus, ICON_FOCUS)
-  ])}
+  ];
+  const addFullWidth = (btn) => btn.replace('class="oks-access-opt', 'class="oks-access-opt full-width');
+  const flatContent = () => {
+    const groups = [
+      { title: t.txt, items: textBtns.filter(Boolean) },
+      { title: t.vis, items: visBtns.filter(Boolean) },
+      { title: t.ori, items: oriBtns.filter(Boolean) }
+    ].filter((g) => g.items.length > 0);
+    const total = groups.reduce((n, g) => n + g.items.length, 0);
+    if (total % 2 === 1 && groups.length > 0) {
+      const last = groups[groups.length - 1];
+      last.items[last.items.length - 1] = addFullWidth(last.items[last.items.length - 1]);
+    }
+    const inner = groups.map((g) => `<h4 class="oks-access-title oks-sr-only">${escapeHtml(g.title)}</h4>${g.items.join("")}`).join("");
+    return `<div class="oks-access-grid oks-flat">${inner}</div>`;
+  };
+  const controlsHtml = flatLayout ? flatContent() : section(t.txt, textBtns) + section(t.vis, visBtns) + section(t.ori, oriBtns);
+  const triggerBlock = showTrigger ? `
+<div class="oks-access-wrapper" id="oks-wrapper" data-position="${opts.position}">
+  <button class="oks-access-btn" id="oks-trigger" part="trigger" data-trigger-icon="${triggerIcon}" aria-label="${escapeAttr(t.title)}" aria-expanded="false" aria-controls="oks-panel" type="button">
+    ${trig}
+  </button>
+  <span class="oks-active-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><polyline points="20 6 9 17 4 12"/></svg></span>
+</div>` : "";
+  return `${triggerBlock}
+<div class="oks-access-panel" id="oks-panel" role="dialog" aria-modal="true" aria-labelledby="oks-panel-title" inert>
+  <div class="oks-access-header">
+    <h3 id="oks-panel-title">${escapeHtml(t.title)}</h3>
+    <button class="oks-access-close" id="oks-close" aria-label="${escapeAttr(t.close)}" type="button">${ICON_CLOSE}</button>
+  </div>
+  <div class="oks-access-content">
+    ${presetsBlock}
+    ${controlsHtml}
   </div>
   <div class="oks-access-footer">
     <button class="oks-access-reset" id="oks-reset" type="button">${escapeHtml(t.reset)}</button>
@@ -374,8 +391,69 @@ function bindPanelBehavior(root, opts = {}) {
     return noopController();
   }
   let state = loadState(storageKey);
+  const scoped = opts.scopeEl !== void 0;
+  const GLOBAL_KEY = "oksiac::global";
+  const GLOBAL_MAP = [
+    { flag: "bigCursor", cls: "oks-big-cursor", match: (b) => b.getAttribute("data-class") === "oks-big-cursor" },
+    { flag: "readingGuide", cls: "oks-a11y-guide", match: (b) => b.getAttribute("data-action") === "guide" },
+    { flag: "readingMask", cls: "oks-a11y-mask", match: (b) => b.getAttribute("data-action") === "mask" }
+  ];
+  const globalOfferableOf = (b) => GLOBAL_MAP.find((x) => x.match(b));
+  const loadGlobal = () => {
+    try {
+      const r = JSON.parse(localStorage.getItem(GLOBAL_KEY) ?? "{}");
+      return { bigCursor: !!r.bigCursor, readingGuide: !!r.readingGuide, readingMask: !!r.readingMask };
+    } catch {
+      return { bigCursor: false, readingGuide: false, readingMask: false };
+    }
+  };
+  const saveGlobal = (g) => {
+    try {
+      if (g.bigCursor || g.readingGuide || g.readingMask) localStorage.setItem(GLOBAL_KEY, JSON.stringify(g));
+      else localStorage.removeItem(GLOBAL_KEY);
+    } catch {
+    }
+  };
+  const applyGlobal = (g) => {
+    document.body.classList.toggle("oks-big-cursor", g.bigCursor);
+    document.body.classList.toggle("oks-a11y-guide", g.readingGuide);
+    document.body.classList.toggle("oks-a11y-mask", g.readingMask);
+    for (const btn of opts$) {
+      const m = globalOfferableOf(btn);
+      if (!m) continue;
+      btn.classList.toggle("is-active", g[m.flag]);
+      btn.setAttribute("aria-pressed", g[m.flag] ? "true" : "false");
+    }
+  };
+  const refreshGlobal = () => {
+    if (scoped) applyGlobal(loadGlobal());
+  };
+  const syncGlobalFromState = () => {
+    if (!scoped) return;
+    const g = loadGlobal();
+    let changed = false;
+    if (state.bigCursor) {
+      g.bigCursor = true;
+      state.bigCursor = false;
+      changed = true;
+    }
+    if (state.readingGuide) {
+      g.readingGuide = true;
+      state.readingGuide = false;
+      changed = true;
+    }
+    if (state.readingMask) {
+      g.readingMask = true;
+      state.readingMask = false;
+      changed = true;
+    }
+    if (changed) {
+      saveGlobal(g);
+      applyGlobal(g);
+      document.dispatchEvent(new CustomEvent("oksiac:globalchange"));
+    }
+  };
   function applyState() {
-    const scoped = opts.scopeEl !== void 0;
     const fxRoot = scoped ? opts.scopeEl ?? null : document.body;
     const rootEl = document.documentElement;
     if (fxRoot) {
@@ -410,6 +488,7 @@ function bindPanelBehavior(root, opts = {}) {
   }
   function syncButtonsFromState() {
     for (const btn of opts$) {
+      if (scoped && globalOfferableOf(btn)) continue;
       const action = btn.getAttribute("data-action");
       if (action === "multi" || action === "colorblind") {
         const prefix = btn.getAttribute("data-prefix") ?? "";
@@ -444,6 +523,17 @@ function bindPanelBehavior(root, opts = {}) {
   }
   const onOptClick = (e) => {
     const btn = e.currentTarget;
+    if (scoped) {
+      const go = globalOfferableOf(btn);
+      if (go) {
+        const g = loadGlobal();
+        g[go.flag] = !g[go.flag];
+        saveGlobal(g);
+        applyGlobal(g);
+        document.dispatchEvent(new CustomEvent("oksiac:globalchange"));
+        return;
+      }
+    }
     const action = btn.getAttribute("data-action");
     if (action === "multi") {
       const prefix = btn.getAttribute("data-prefix") ?? "";
@@ -472,6 +562,7 @@ function bindPanelBehavior(root, opts = {}) {
       if (id && PRESETS[id]) Object.assign(state, filterPresetForEnabled(id, enabled));
       btn.classList.add("is-flashing");
       setTimeout(() => btn.classList.remove("is-flashing"), 250);
+      syncGlobalFromState();
     }
     applyState();
     saveState(storageKey, state);
@@ -480,6 +571,12 @@ function bindPanelBehavior(root, opts = {}) {
     state = { ...DEFAULT_STATE };
     applyState();
     saveState(storageKey, state);
+    if (scoped) {
+      const cleared = { bigCursor: false, readingGuide: false, readingMask: false };
+      saveGlobal(cleared);
+      applyGlobal(cleared);
+      document.dispatchEvent(new CustomEvent("oksiac:globalchange"));
+    }
   };
   let opener = null;
   let ignoreDocClose = false;
@@ -647,14 +744,16 @@ function bindPanelBehavior(root, opts = {}) {
     saveNudge();
   };
   const onMove = (e) => {
-    if (!state.readingGuide && !state.readingMask) return;
+    const guideOn = document.body.classList.contains("oks-a11y-guide");
+    const maskOn = document.body.classList.contains("oks-a11y-mask");
+    if (!guideOn && !maskOn) return;
     const y = e.touches?.[0]?.clientY ?? e.clientY;
     if (typeof y !== "number") return;
-    if (state.readingGuide) {
+    if (guideOn) {
       const guide = document.getElementById("oks-reading-guide");
       if (guide) guide.style.top = `${y}px`;
     }
-    if (state.readingMask) {
+    if (maskOn) {
       const mask = document.getElementById("oks-reading-mask");
       if (mask) mask.style.setProperty("--oks-mask-y", `${y}px`);
     }
@@ -670,9 +769,15 @@ function bindPanelBehavior(root, opts = {}) {
   const onReposition = () => {
     if (opts.scopeEl && panel.classList.contains("is-open")) positionScopedDialog();
   };
-  if (opts.scopeEl !== void 0) {
+  const onGlobalChange = () => refreshGlobal();
+  const onStorage = (e) => {
+    if (e.key === GLOBAL_KEY) refreshGlobal();
+  };
+  if (scoped) {
     window.addEventListener("scroll", onReposition, true);
     window.addEventListener("resize", onReposition);
+    document.addEventListener("oksiac:globalchange", onGlobalChange);
+    window.addEventListener("storage", onStorage);
   }
   if (nudgeMax > 0 && trigger) {
     loadNudge();
@@ -685,6 +790,7 @@ function bindPanelBehavior(root, opts = {}) {
     trigger.addEventListener("keydown", onTriggerKey);
   }
   applyState();
+  refreshGlobal();
   const dispose = () => {
     trigger?.removeEventListener("click", onTriggerClick);
     closeBtn.removeEventListener("click", closePanel);
@@ -694,9 +800,11 @@ function bindPanelBehavior(root, opts = {}) {
     document.removeEventListener("keydown", onKeyDown);
     document.removeEventListener("mousemove", onMove);
     document.removeEventListener("touchmove", onMove);
-    if (opts.scopeEl !== void 0) {
+    if (scoped) {
       window.removeEventListener("scroll", onReposition, true);
       window.removeEventListener("resize", onReposition);
+      document.removeEventListener("oksiac:globalchange", onGlobalChange);
+      window.removeEventListener("storage", onStorage);
     }
     trigger?.removeEventListener("pointerdown", onPointerDown);
     document.removeEventListener("pointermove", onPointerMove);
@@ -833,6 +941,19 @@ var PANEL_CSS = `
   text-transform: uppercase;
   color: #888;
 }
+/* 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
+   force a visual row break or occupy a cell. */
+.oks-sr-only {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  margin: 0; padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .oks-access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
 .oks-access-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
 .oks-preset {
@@ -1004,18 +1125,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,
@@ -1152,13 +1277,13 @@ ${s}.oks-a11y-focus button,
 ${s}.oks-a11y-focus input,
 ${s}.oks-a11y-focus select,
 ${s}.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;
 }
 ${s}.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;
 }
 
 ${s}.oks-a11y-contrast, ${s}.oks-a11y-contrast * {
@@ -1189,6 +1314,6 @@ ${s}.oks-a11y-bigtargets summary {
 `;
 }
 
-export { ALL_CONTROLS, COLORBLIND_FILTERS_SVG, DEFAULT_STATE, EFFECT_CSS, NON_SCOPABLE_CONTROLS, PANEL_CSS, PRESETS, PRESET_IDS, bindPanelBehavior, buildPanelHtml, getTranslation, isStateEmpty, loadState, positionCss, resolveEnabledControls, saveState, scopedControls, scopedEffectCss, supportedLocales };
+export { ALL_CONTROLS, COLORBLIND_FILTERS_SVG, DEFAULT_STATE, EFFECT_CSS, GLOBAL_OFFERABLE_CONTROLS, NON_SCOPABLE_CONTROLS, PANEL_CSS, PRESETS, PRESET_IDS, bindPanelBehavior, buildPanelHtml, getTranslation, isStateEmpty, loadState, positionCss, resolveEnabledControls, saveState, scopedControls, scopedEffectCss, supportedLocales };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map