accessify-widget 0.3.40 → 0.3.42

package/dist/accessify.mjs

@@ -1,4 +1,4 @@
-import { d, i } from "./index-BD3C-sG-.js";
+import { d, i } from "./index-lQVz5TBk.js";
 export {
   d as destroy,
   i as init

package/dist/{contrast-F7lHj833.js → contrast-BcTWODsK.js}

@@ -47,7 +47,8 @@ function buildCSS(mode) {
     html {
       color-scheme: ${t.colorScheme} !important;
     }
-    html, body {
+    html, body,
+    body *${EX} {
       background-color: ${t.pageBg} !important;
     }
   `;
@@ -116,12 +117,7 @@ function buildCSS(mode) {
       color: #000000 !important;
     }
   ` : "";
-  const sectionBg = `
-    body :where(main, article, aside, header, footer, section, nav)${EX} {
-      background-color: ${t.pageBg} !important;
-    }
-  `;
-  return base + textColor + links + forms + focus + borders + images + highExtras + sectionBg;
+  return base + textColor + links + forms + focus + borders + images + highExtras;
 }
 function createContrastModule() {
   let currentMode = "off";
@@ -173,4 +169,4 @@ function createContrastModule() {
 export {
   createContrastModule as default
 };
-//# sourceMappingURL=contrast-F7lHj833.js.map
+//# sourceMappingURL=contrast-BcTWODsK.js.map

package/dist/contrast-BcTWODsK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast-BcTWODsK.js","sources":["../src/features/contrast.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// Accessify – Contrast Modes (Accessibility Feature)\n// ---------------------------------------------------------------------------\n//\n// Three modes: light, dark, high — each as a clearly defined token set.\n//\n// Design principles:\n//   1. CONTENT elements (text, headings, links, buttons, form controls) get\n//      explicit color overrides — these are what users need to read.\n//   2. STRUCTURAL elements (wrapper divs, sections, nav) get background only\n//      via `html` and `body` — not individually. This prevents breaking\n//      Framer/CSS-Grid/Flex layouts where divs use fit-content, overflow:hidden,\n//      or fixed heights.\n//   3. The widget itself (inside #accessify-root / Shadow DOM) is NEVER touched.\n//   4. Focus indicators are defined in ALL modes, not just high contrast.\n//   5. border-color is NOT globally overridden — only on elements that have\n//      visible borders for content separation (tables, fieldsets, hr).\n//\n// Selector strategy:\n//   - `:where()` for zero-specificity (site styles can still win if needed,\n//     but `!important` ensures accessibility overrides take priority).\n//   - `body :where(...)` scopes to page content.\n//   - `body *:not(#accessify-root):not(#accessify-root *)` used only where\n//     we need broad text color coverage.\n//   - Framer-safe: no background-color on generic div/section/article — only\n//     on html/body. Content readability comes from text color, not from\n//     painting every container.\n//\n// ---------------------------------------------------------------------------\n\nimport type { FeatureModule, FeatureState } from '../types';\n\ntype ContrastMode = 'off' | 'light' | 'dark' | 'high';\n\n// ---------------------------------------------------------------------------\n// Token definitions — each mode is a self-contained color system\n// ---------------------------------------------------------------------------\n\ninterface ContrastTokens {\n  colorScheme: string;\n  pageBg: string;\n  text: string;\n  textStrong: string;    // headings, bold\n  link: string;\n  linkVisited: string;\n  focusRing: string;\n  borderContent: string; // for tables, hr, fieldset — NOT every div\n  inputBg: string;\n  inputBorder: string;\n  imgFilter: string;     // empty string = no filter\n}\n\nconst TOKENS: Record<Exclude<ContrastMode, 'off'>, ContrastTokens> = {\n  light: {\n    colorScheme: 'light',\n    pageBg:       '#fbf7ef',\n    text:         '#1a1a1a',\n    textStrong:   '#0d0d0d',\n    link:         '#0047b3',\n    linkVisited:  '#3d2b85',\n    focusRing:    '#0047b3',\n    borderContent:'#888078',\n    inputBg:      '#ffffff',\n    inputBorder:  '#6f675d',\n    imgFilter:    '',\n  },\n  dark: {\n    colorScheme: 'dark',\n    pageBg:       '#101418',\n    text:         '#e8e4dc',\n    textStrong:   '#ffffff',\n    link:         '#7cc8f5',\n    linkVisited:  '#b8a0e8',\n    focusRing:    '#7cc8f5',\n    borderContent:'#3a4a58',\n    inputBg:      '#1a2028',\n    inputBorder:  '#4a5a68',\n    imgFilter:    'brightness(0.90) contrast(1.06)',\n  },\n  high: {\n    colorScheme: 'dark',\n    pageBg:       '#000000',\n    text:         '#ffffff',\n    textStrong:   '#ffffff',\n    link:         '#ffff00',\n    linkVisited:  '#ffff00',\n    focusRing:    '#ffff00',\n    borderContent:'#ffffff',\n    inputBg:      '#000000',\n    inputBorder:  '#ffffff',\n    imgFilter:    'contrast(1.25) brightness(0.95)',\n  },\n};\n\n// ---------------------------------------------------------------------------\n// CSS generation — separated into logical layers\n// ---------------------------------------------------------------------------\n\n/** Elements to exclude from page-level contrast (the widget itself) */\nconst EX = ':not(#accessify-root):not(#accessify-root *)';\n\nfunction buildCSS(mode: Exclude<ContrastMode, 'off'>): string {\n  const t = TOKENS[mode];\n  const isHigh = mode === 'high';\n\n  // ── Layer 1: Background on ALL elements ──\n  // We must override background-color broadly so dark headers/sections don't\n  // keep their original dark bg when text switches to dark (light mode) or\n  // vice versa. Key: use `background-color` not `background` to preserve\n  // background-images. Don't touch border-color or box-shadow here — those\n  // were what broke Framer layouts before.\n  const base = `\n    html {\n      color-scheme: ${t.colorScheme} !important;\n    }\n    html, body,\n    body *${EX} {\n      background-color: ${t.pageBg} !important;\n    }\n  `;\n\n  // ── Layer 2: Text color on ALL content elements ──\n  // Using body * ensures text inside any container is readable, without\n  // painting the container's background (which would break layouts).\n  const textColor = `\n    body *${EX} {\n      color: ${t.text} !important;\n    }\n    body :where(h1, h2, h3, h4, h5, h6, strong, b, th)${EX} {\n      color: ${t.textStrong} !important;\n    }\n  `;\n\n  // ── Layer 3: Links — distinct color + underline for visibility ──\n  const links = `\n    body :where(a)${EX} {\n      color: ${t.link} !important;\n      text-decoration: underline !important;\n      text-decoration-color: ${t.link} !important;\n      ${isHigh ? 'text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;' : ''}\n    }\n    body :where(a:visited)${EX} {\n      color: ${t.linkVisited} !important;\n    }\n    body :where(a:hover, a:focus)${EX} {\n      opacity: 0.85 !important;\n    }\n  `;\n\n  // ── Layer 4: Form controls — explicit bg + border for readability ──\n  // These get background because they ARE content, not structural wrappers.\n  const forms = `\n    body :where(input, textarea, select)${EX} {\n      background-color: ${t.inputBg} !important;\n      color: ${t.text} !important;\n      border: 1px solid ${t.inputBorder} !important;\n      box-shadow: none !important;\n    }\n    body :where(button, [role=\"button\"])${EX} {\n      color: ${t.text} !important;\n      border-color: ${t.inputBorder} !important;\n      ${isHigh ? `background-color: ${t.pageBg} !important; border: 2px solid ${t.inputBorder} !important;` : ''}\n    }\n  `;\n\n  // ── Layer 5: Focus indicators — in ALL modes, stronger in high ──\n  const focus = `\n    body :where(a, button, input, textarea, select, [tabindex])${EX}:focus-visible {\n      outline: ${isHigh ? '3px' : '2px'} solid ${t.focusRing} !important;\n      outline-offset: 2px !important;\n    }\n  `;\n\n  // ── Layer 6: Content borders — only on elements that visually separate ──\n  // NOT on generic divs — that destroys Framer card layouts.\n  const borders = `\n    body :where(table, th, td, hr, fieldset)${EX} {\n      border-color: ${t.borderContent} !important;\n    }\n  `;\n\n  // ── Layer 7: Images — gentle filter, skip decorative SVG icons ──\n  const images = t.imgFilter ? `\n    body :where(img, video, picture)${EX} {\n      filter: ${t.imgFilter} !important;\n    }\n  ` : '';\n\n  // ── Layer 8: High contrast extras ──\n  const highExtras = isHigh ? `\n    body :where(::placeholder)${EX} {\n      color: #aaaaaa !important;\n      opacity: 1 !important;\n    }\n    body :where(::selection) {\n      background: #ffff00 !important;\n      color: #000000 !important;\n    }\n    body :where(mark)${EX} {\n      background: #ffff00 !important;\n      color: #000000 !important;\n    }\n  ` : '';\n\n  return base + textColor + links + forms + focus + borders + images + highExtras;\n}\n\n// ---------------------------------------------------------------------------\n// Module\n// ---------------------------------------------------------------------------\n\nexport default function createContrastModule(): FeatureModule {\n  let currentMode: ContrastMode = 'off';\n  const STYLE_ID = 'accessify-contrast';\n  const STORAGE_KEY = 'accessify-contrast-mode';\n\n  function applyStyles(mode: ContrastMode) {\n    let styleEl = document.getElementById(STYLE_ID);\n    if (mode === 'off') {\n      styleEl?.remove();\n      return;\n    }\n    if (!styleEl) {\n      styleEl = document.createElement('style');\n      styleEl.id = STYLE_ID;\n      document.head.appendChild(styleEl);\n    }\n    styleEl.textContent = buildCSS(mode);\n  }\n\n  function activate() {\n    const saved = localStorage.getItem(STORAGE_KEY) as ContrastMode;\n    currentMode = saved === 'light' || saved === 'dark' || saved === 'high' ? saved : 'dark';\n    applyStyles(currentMode);\n  }\n\n  function deactivate() {\n    currentMode = 'off';\n    applyStyles('off');\n    localStorage.removeItem(STORAGE_KEY);\n  }\n\n  return {\n    id: 'contrast',\n    name: () => 'Contrast',\n    description: 'Increase contrast for better readability',\n    icon: 'contrast',\n    category: 'visual',\n    activate,\n    deactivate,\n    getState: (): FeatureState => ({ id: 'contrast', enabled: currentMode !== 'off', value: currentMode }),\n    setState: (mode: ContrastMode) => {\n      currentMode = mode === 'light' || mode === 'dark' || mode === 'high' ? mode : 'off';\n      applyStyles(currentMode);\n      if (currentMode === 'off') {\n        localStorage.removeItem(STORAGE_KEY);\n      } else {\n        localStorage.setItem(STORAGE_KEY, currentMode);\n      }\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/{index-BD3C-sG-.js → index-lQVz5TBk.js}

@@ -6597,15 +6597,7 @@ function FeatureGrid($$anchor, $$props) {
       iconId: "alt-text"
     }
   };
-  const VISUAL_IDS = [
-    "keyboard-nav",
-    "link-highlight",
-    "animation-stop",
-    "hide-images",
-    "big-cursor"
-  ];
-  const READING_IDS = ["reading-guide", "reading-mask", "tts"];
-  const AI_IDS = ["text-simplify", "alt-text"];
+  const INLINE_CONTROLS = /* @__PURE__ */ new Set(["contrast", "text-size"]);
   const CONTRAST_MODES = [
     {
       id: "light",
@@ -6626,16 +6618,16 @@ function FeatureGrid($$anchor, $$props) {
   const AI_FEATURES = /* @__PURE__ */ new Set(["text-simplify", "alt-text"]);
   const loadedModules = /* @__PURE__ */ new Map();
   const FEATURE_LOADERS = {
-    contrast: () => import("./contrast-F7lHj833.js"),
+    contrast: () => import("./contrast-BcTWODsK.js"),
     "text-size": () => import("./text-size-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-ohhgkfVh.js"),
+    "keyboard-nav": () => import("./keyboard-nav-BqdopG_-.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
     "animation-stop": () => import("./animation-stop-_chC8bg1.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-BuecyE3V.js"),
+    "page-structure": () => import("./page-structure-D74Eg0X5.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-CK2GFhq2.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6669,9 +6661,6 @@ function FeatureGrid($$anchor, $$props) {
     const iconFn = icons[iconId];
     return iconFn ? iconFn() : "";
   }
-  function getVisibleFeatures(ids) {
-    return ids.filter((id) => get(visibleFeatureIds).has(id)).map((id) => FEATURE_REGISTRY[id]).filter(Boolean);
-  }
   function updateControlState(id, module) {
     if (!module) return;
     const state2 = module.getState();
@@ -6774,9 +6763,7 @@ function FeatureGrid($$anchor, $$props) {
     $$props.ontoggle("text-size", true);
     $$props.ontextsize?.(value);
   }
-  let visualFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(VISUAL_IDS));
-  let readingFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(READING_IDS));
-  let aiFeatures = /* @__PURE__ */ user_derived(() => getVisibleFeatures(AI_IDS));
+  let cardFeatures = /* @__PURE__ */ user_derived(() => $$props.config.features.filter((id) => !INLINE_CONTROLS.has(id) && FEATURE_REGISTRY[id]).map((id) => FEATURE_REGISTRY[id]));
   user_effect(() => {
     `${$$props.config.features.join("|")}|${get(activeSignature)}`;
     void syncActiveModules();
@@ -6921,48 +6908,38 @@ function FeatureGrid($$anchor, $$props) {
   {
     var consequent_4 = ($$anchor2) => {
       var div_6 = root_9();
-      each(
-        div_6,
-        21,
-        () => [
-          ...get(visualFeatures),
-          ...get(readingFeatures),
-          ...get(aiFeatures)
-        ],
-        (feature) => feature.id,
-        ($$anchor3, feature) => {
-          const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
-          var div_7 = root_10();
-          var button_2 = child(div_7);
-          var span_10 = child(button_2);
-          html(span_10, () => getIcon(get(feature).iconId), true);
-          var span_11 = sibling(span_10, 2);
-          var text_4 = child(span_11);
-          var span_12 = sibling(button_2, 2);
-          template_effect(
-            ($0, $1, $2, $3) => {
-              set_attribute(button_2, "data-active", get(isActive));
-              set_attribute(button_2, "aria-checked", get(isActive));
-              set_attribute(button_2, "aria-label", $0);
-              set_text(text_4, $1);
-              set_attribute(span_12, "aria-label", $2);
-              set_attribute(span_12, "title", $3);
-            },
-            [
-              () => t(get(feature).nameKey, $$props.config.lang),
-              () => t(get(feature).nameKey, $$props.config.lang),
-              () => t(get(feature).descKey, $$props.config.lang),
-              () => t(get(feature).descKey, $$props.config.lang)
-            ]
-          );
-          delegated("click", button_2, () => handleToggle(get(feature).id));
-          append($$anchor3, div_7);
-        }
-      );
+      each(div_6, 21, () => get(cardFeatures), (feature) => feature.id, ($$anchor3, feature) => {
+        const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
+        var div_7 = root_10();
+        var button_2 = child(div_7);
+        var span_10 = child(button_2);
+        html(span_10, () => getIcon(get(feature).iconId), true);
+        var span_11 = sibling(span_10, 2);
+        var text_4 = child(span_11);
+        var span_12 = sibling(button_2, 2);
+        template_effect(
+          ($0, $1, $2, $3) => {
+            set_attribute(button_2, "data-active", get(isActive));
+            set_attribute(button_2, "aria-checked", get(isActive));
+            set_attribute(button_2, "aria-label", $0);
+            set_text(text_4, $1);
+            set_attribute(span_12, "aria-label", $2);
+            set_attribute(span_12, "title", $3);
+          },
+          [
+            () => t(get(feature).nameKey, $$props.config.lang),
+            () => t(get(feature).nameKey, $$props.config.lang),
+            () => t(get(feature).descKey, $$props.config.lang),
+            () => t(get(feature).descKey, $$props.config.lang)
+          ]
+        );
+        delegated("click", button_2, () => handleToggle(get(feature).id));
+        append($$anchor3, div_7);
+      });
       append($$anchor2, div_6);
     };
     if_block(node_4, ($$render) => {
-      if (get(visualFeatures).length > 0 || get(readingFeatures).length > 0 || get(aiFeatures).length > 0) $$render(consequent_4);
+      if (get(cardFeatures).length > 0) $$render(consequent_4);
     });
   }
   append($$anchor, fragment);
@@ -8988,4 +8965,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-BD3C-sG-.js.map
+//# sourceMappingURL=index-lQVz5TBk.js.map