accessify-widget 0.3.39 → 0.3.41

package/dist/accessify.mjs

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

package/dist/contrast-BcTWODsK.js

@@ -0,0 +1,172 @@
+const TOKENS = {
+  light: {
+    colorScheme: "light",
+    pageBg: "#fbf7ef",
+    text: "#1a1a1a",
+    textStrong: "#0d0d0d",
+    link: "#0047b3",
+    linkVisited: "#3d2b85",
+    focusRing: "#0047b3",
+    borderContent: "#888078",
+    inputBg: "#ffffff",
+    inputBorder: "#6f675d",
+    imgFilter: ""
+  },
+  dark: {
+    colorScheme: "dark",
+    pageBg: "#101418",
+    text: "#e8e4dc",
+    textStrong: "#ffffff",
+    link: "#7cc8f5",
+    linkVisited: "#b8a0e8",
+    focusRing: "#7cc8f5",
+    borderContent: "#3a4a58",
+    inputBg: "#1a2028",
+    inputBorder: "#4a5a68",
+    imgFilter: "brightness(0.90) contrast(1.06)"
+  },
+  high: {
+    colorScheme: "dark",
+    pageBg: "#000000",
+    text: "#ffffff",
+    textStrong: "#ffffff",
+    link: "#ffff00",
+    linkVisited: "#ffff00",
+    focusRing: "#ffff00",
+    borderContent: "#ffffff",
+    inputBg: "#000000",
+    inputBorder: "#ffffff",
+    imgFilter: "contrast(1.25) brightness(0.95)"
+  }
+};
+const EX = ":not(#accessify-root):not(#accessify-root *)";
+function buildCSS(mode) {
+  const t = TOKENS[mode];
+  const isHigh = mode === "high";
+  const base = `
+    html {
+      color-scheme: ${t.colorScheme} !important;
+    }
+    html, body,
+    body *${EX} {
+      background-color: ${t.pageBg} !important;
+    }
+  `;
+  const textColor = `
+    body *${EX} {
+      color: ${t.text} !important;
+    }
+    body :where(h1, h2, h3, h4, h5, h6, strong, b, th)${EX} {
+      color: ${t.textStrong} !important;
+    }
+  `;
+  const links = `
+    body :where(a)${EX} {
+      color: ${t.link} !important;
+      text-decoration: underline !important;
+      text-decoration-color: ${t.link} !important;
+      ${isHigh ? "text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;" : ""}
+    }
+    body :where(a:visited)${EX} {
+      color: ${t.linkVisited} !important;
+    }
+    body :where(a:hover, a:focus)${EX} {
+      opacity: 0.85 !important;
+    }
+  `;
+  const forms = `
+    body :where(input, textarea, select)${EX} {
+      background-color: ${t.inputBg} !important;
+      color: ${t.text} !important;
+      border: 1px solid ${t.inputBorder} !important;
+      box-shadow: none !important;
+    }
+    body :where(button, [role="button"])${EX} {
+      color: ${t.text} !important;
+      border-color: ${t.inputBorder} !important;
+      ${isHigh ? `background-color: ${t.pageBg} !important; border: 2px solid ${t.inputBorder} !important;` : ""}
+    }
+  `;
+  const focus = `
+    body :where(a, button, input, textarea, select, [tabindex])${EX}:focus-visible {
+      outline: ${isHigh ? "3px" : "2px"} solid ${t.focusRing} !important;
+      outline-offset: 2px !important;
+    }
+  `;
+  const borders = `
+    body :where(table, th, td, hr, fieldset)${EX} {
+      border-color: ${t.borderContent} !important;
+    }
+  `;
+  const images = t.imgFilter ? `
+    body :where(img, video, picture)${EX} {
+      filter: ${t.imgFilter} !important;
+    }
+  ` : "";
+  const highExtras = isHigh ? `
+    body :where(::placeholder)${EX} {
+      color: #aaaaaa !important;
+      opacity: 1 !important;
+    }
+    body :where(::selection) {
+      background: #ffff00 !important;
+      color: #000000 !important;
+    }
+    body :where(mark)${EX} {
+      background: #ffff00 !important;
+      color: #000000 !important;
+    }
+  ` : "";
+  return base + textColor + links + forms + focus + borders + images + highExtras;
+}
+function createContrastModule() {
+  let currentMode = "off";
+  const STYLE_ID = "accessify-contrast";
+  const STORAGE_KEY = "accessify-contrast-mode";
+  function applyStyles(mode) {
+    let styleEl = document.getElementById(STYLE_ID);
+    if (mode === "off") {
+      styleEl?.remove();
+      return;
+    }
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = STYLE_ID;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = buildCSS(mode);
+  }
+  function activate() {
+    const saved = localStorage.getItem(STORAGE_KEY);
+    currentMode = saved === "light" || saved === "dark" || saved === "high" ? saved : "dark";
+    applyStyles(currentMode);
+  }
+  function deactivate() {
+    currentMode = "off";
+    applyStyles("off");
+    localStorage.removeItem(STORAGE_KEY);
+  }
+  return {
+    id: "contrast",
+    name: () => "Contrast",
+    description: "Increase contrast for better readability",
+    icon: "contrast",
+    category: "visual",
+    activate,
+    deactivate,
+    getState: () => ({ id: "contrast", enabled: currentMode !== "off", value: currentMode }),
+    setState: (mode) => {
+      currentMode = mode === "light" || mode === "dark" || mode === "high" ? mode : "off";
+      applyStyles(currentMode);
+      if (currentMode === "off") {
+        localStorage.removeItem(STORAGE_KEY);
+      } else {
+        localStorage.setItem(STORAGE_KEY, currentMode);
+      }
+    }
+  };
+}
+export {
+  createContrastModule as default
+};
+//# 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-SYghhXzh.js → index-Bpz3Pgxd.js}

@@ -6516,12 +6516,16 @@ function getEnglishSimplificationPrompt() {
 
 Return ONLY the simplified text.`;
 }
-var root_2$1 = /* @__PURE__ */ from_html(`<button class="accessify-chip accessify-chip--icon"><span class="accessify-chip-icon" aria-hidden="true"></span> <span> </span></button>`);
+var root_3$1 = /* @__PURE__ */ from_html(`<span class="accessify-chip-check" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg></span>`);
+var root_4 = /* @__PURE__ */ from_html(`<span class="accessify-chip-icon" aria-hidden="true"></span>`);
+var root_2$1 = /* @__PURE__ */ from_html(`<button class="accessify-chip accessify-chip--icon"><!> <span> </span></button>`);
 var root_1$2 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-chip-row"></div></div>`);
-var root_4 = /* @__PURE__ */ from_html(`<button class="accessify-chip accessify-chip--icon"><span aria-hidden="true">A</span> <span> </span></button>`);
-var root_3$1 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-chip-row"></div></div>`);
-var root_6 = /* @__PURE__ */ from_html(`<div class="accessify-card-wrap"><button class="accessify-card" role="switch"><span class="accessify-card-icon" aria-hidden="true"></span> <span class="accessify-card-label"> </span></button> <span class="accessify-card-info" role="note"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span></div>`);
-var root_5 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
+var root_7 = /* @__PURE__ */ from_html(`<span class="accessify-chip-check" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg></span>`);
+var root_8 = /* @__PURE__ */ from_html(`<span aria-hidden="true">A</span>`);
+var root_6 = /* @__PURE__ */ from_html(`<button class="accessify-chip accessify-chip--icon"><!> <span> </span></button>`);
+var root_5 = /* @__PURE__ */ from_html(`<div class="accessify-control-row" role="group"><div class="accessify-control-label"><span class="accessify-control-label-icon" aria-hidden="true"></span> <span class="accessify-control-label-text"> </span></div> <div class="accessify-chip-row"></div></div>`);
+var root_10 = /* @__PURE__ */ from_html(`<div class="accessify-card-wrap"><button class="accessify-card" role="switch"><span class="accessify-card-icon" aria-hidden="true"></span> <span class="accessify-card-label"> </span></button> <span class="accessify-card-info" role="note"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span></div>`);
+var root_9 = /* @__PURE__ */ from_html(`<div class="accessify-features"></div>`);
 var root$2 = /* @__PURE__ */ from_html(`<!> <!> <div class="accessify-section-divider"></div> <!>`, 1);
 function FeatureGrid($$anchor, $$props) {
   push($$props, true);
@@ -6622,16 +6626,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-CqsICAkU.js"),
+    contrast: () => import("./contrast-BcTWODsK.js"),
     "text-size": () => import("./text-size-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-BPNT4h61.js"),
+    "keyboard-nav": () => import("./keyboard-nav-BY-Xbs7a.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-Cg1a9HyG.js"),
+    "page-structure": () => import("./page-structure-B4O7IdeA.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-CK2GFhq2.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6780,7 +6784,7 @@ function FeatureGrid($$anchor, $$props) {
   var fragment = root$2();
   var node = first_child(fragment);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var div = root_1$2();
       var div_1 = child(div);
       var span = child(div_1);
@@ -6790,10 +6794,24 @@ function FeatureGrid($$anchor, $$props) {
       var div_2 = sibling(div_1, 2);
       each(div_2, 21, () => CONTRAST_MODES, index, ($$anchor3, mode) => {
         var button = root_2$1();
-        var span_2 = child(button);
-        html(span_2, () => get(mode).icon, true);
-        var span_3 = sibling(span_2, 2);
-        var text_1 = child(span_3);
+        var node_1 = child(button);
+        {
+          var consequent = ($$anchor4) => {
+            var span_2 = root_3$1();
+            append($$anchor4, span_2);
+          };
+          var alternate = ($$anchor4) => {
+            var span_3 = root_4();
+            html(span_3, () => get(mode).icon, true);
+            append($$anchor4, span_3);
+          };
+          if_block(node_1, ($$render) => {
+            if (get(contrastMode) === get(mode).id) $$render(consequent);
+            else $$render(alternate, -1);
+          });
+        }
+        var span_4 = sibling(node_1, 2);
+        var text_1 = child(span_4);
         template_effect(
           ($0) => {
             set_attribute(button, "data-active", get(contrastMode) === get(mode).id);
@@ -6819,18 +6837,18 @@ function FeatureGrid($$anchor, $$props) {
     };
     var d = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("contrast"));
     if_block(node, ($$render) => {
-      if (get(d)) $$render(consequent);
+      if (get(d)) $$render(consequent_1);
     });
   }
-  var node_1 = sibling(node, 2);
+  var node_2 = sibling(node, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var div_3 = root_3$1();
+    var consequent_3 = ($$anchor2) => {
+      var div_3 = root_5();
       var div_4 = child(div_3);
-      var span_4 = child(div_4);
-      html(span_4, () => getIcon("text-size"), true);
-      var span_5 = sibling(span_4, 2);
-      var text_2 = child(span_5);
+      var span_5 = child(div_4);
+      html(span_5, () => getIcon("text-size"), true);
+      var span_6 = sibling(span_5, 2);
+      var text_2 = child(span_6);
       var div_5 = sibling(div_4, 2);
       each(
         div_5,
@@ -6854,14 +6872,28 @@ function FeatureGrid($$anchor, $$props) {
         ],
         index,
         ($$anchor3, step) => {
-          var button_1 = root_4();
-          var span_6 = child(button_1);
-          var span_7 = sibling(span_6, 2);
-          var text_3 = child(span_7);
+          var button_1 = root_6();
+          var node_3 = child(button_1);
+          {
+            var consequent_2 = ($$anchor4) => {
+              var span_7 = root_7();
+              append($$anchor4, span_7);
+            };
+            var alternate_1 = ($$anchor4) => {
+              var span_8 = root_8();
+              template_effect(() => set_style(span_8, `font-size:${get(step).size ?? ""};font-weight:700;line-height:1`));
+              append($$anchor4, span_8);
+            };
+            if_block(node_3, ($$render) => {
+              if (get(textSize) === get(step).pct) $$render(consequent_2);
+              else $$render(alternate_1, -1);
+            });
+          }
+          var span_9 = sibling(node_3, 2);
+          var text_3 = child(span_9);
           template_effect(() => {
             set_attribute(button_1, "data-active", get(textSize) === get(step).pct);
             set_attribute(button_1, "aria-pressed", get(textSize) === get(step).pct);
-            set_style(span_6, `font-size:${get(step).size ?? ""};font-weight:700;line-height:1`);
             set_text(text_3, get(step).label);
           });
           delegated("click", button_1, () => setTextSize(get(textSize) === get(step).pct ? 100 : get(step).pct));
@@ -6881,14 +6913,14 @@ function FeatureGrid($$anchor, $$props) {
       append($$anchor2, div_3);
     };
     var d_1 = /* @__PURE__ */ user_derived(() => get(visibleFeatureIds).has("text-size"));
-    if_block(node_1, ($$render) => {
-      if (get(d_1)) $$render(consequent_1);
+    if_block(node_2, ($$render) => {
+      if (get(d_1)) $$render(consequent_3);
     });
   }
-  var node_2 = sibling(node_1, 4);
+  var node_4 = sibling(node_2, 4);
   {
-    var consequent_2 = ($$anchor2) => {
-      var div_6 = root_5();
+    var consequent_4 = ($$anchor2) => {
+      var div_6 = root_9();
       each(
         div_6,
         21,
@@ -6900,21 +6932,21 @@ function FeatureGrid($$anchor, $$props) {
         (feature) => feature.id,
         ($$anchor3, feature) => {
           const isActive = /* @__PURE__ */ user_derived(() => $$props.activeFeatures.get(get(feature).id) ?? false);
-          var div_7 = root_6();
+          var div_7 = root_10();
           var button_2 = child(div_7);
-          var span_8 = child(button_2);
-          html(span_8, () => getIcon(get(feature).iconId), true);
-          var span_9 = sibling(span_8, 2);
-          var text_4 = child(span_9);
-          var span_10 = sibling(button_2, 2);
+          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_10, "aria-label", $2);
-              set_attribute(span_10, "title", $3);
+              set_attribute(span_12, "aria-label", $2);
+              set_attribute(span_12, "title", $3);
             },
             [
               () => t(get(feature).nameKey, $$props.config.lang),
@@ -6929,8 +6961,8 @@ function FeatureGrid($$anchor, $$props) {
       );
       append($$anchor2, div_6);
     };
-    if_block(node_2, ($$render) => {
-      if (get(visualFeatures).length > 0 || get(readingFeatures).length > 0 || get(aiFeatures).length > 0) $$render(consequent_2);
+    if_block(node_4, ($$render) => {
+      if (get(visualFeatures).length > 0 || get(readingFeatures).length > 0 || get(aiFeatures).length > 0) $$render(consequent_4);
     });
   }
   append($$anchor, fragment);
@@ -7962,10 +7994,21 @@ function createWidgetStyles(config2) {
       transition: background var(--fast), color var(--fast), border-color var(--fast);
     }
     .accessify-chip:hover { border-color: var(--border-hl); background: var(--surface-hover); }
-    .accessify-chip[data-active="true"] { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
-    .accessify-chip--icon { gap: 6px; }
-    .accessify-chip-icon { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; }
-    .accessify-chip-icon svg { width: 14px; height: 14px; }
+    .accessify-chip[data-active="true"] {
+      background: var(--accent); color: var(--accent-on);
+      border-color: var(--accent);
+      border-width: 2px;
+      font-weight: 700;
+    }
+    .accessify-chip--icon { gap: 6px; flex-direction: column; }
+    .accessify-chip-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
+    .accessify-chip-icon svg { width: 16px; height: 16px; }
+    .accessify-chip-check {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; border-radius: 50%;
+      background: rgba(255,255,255,0.25); flex-shrink: 0;
+    }
+    .accessify-chip-check svg { width: 14px; height: 14px; }
 
     /* Text Size stepper */
     .accessify-control-row:has(.accessify-stepper) {
@@ -8945,4 +8988,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-SYghhXzh.js.map
+//# sourceMappingURL=index-Bpz3Pgxd.js.map