@redacto.io/consent-sdk-js 0.1.0 → 0.1.2-beta.0

package/dist/redacto.js

@@ -97,10 +97,49 @@ function applyAttrs(element, attrs) {
     }
   }
 }
+var UNITLESS_PROPS = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "fontWeight",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "scale",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom"
+]);
 function applyStyles(element, styles2) {
   for (const [key, value] of Object.entries(styles2)) {
     if (value == null) continue;
-    element.style[key] = typeof value === "number" ? `${value}px` : value;
+    const stringValue = typeof value === "number" && !UNITLESS_PROPS.has(key) ? `${value}px` : String(value);
+    element.style[key] = stringValue;
   }
 }
 function appendChildren(parent, children) {
@@ -578,19 +617,8 @@ var verifyGuardianStatus = async ({
 };
 
 // src/styles/inject.ts
-var stylesInjected = false;
-var injectCheckboxStyles = () => {
-  if (stylesInjected || typeof document === "undefined") {
-    return;
-  }
-  const STYLE_ID = "redacto-consent-checkbox-styles";
-  if (document.getElementById(STYLE_ID)) {
-    stylesInjected = true;
-    return;
-  }
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = `
+var STYLE_ID = "redacto-consent-checkbox-styles";
+var STYLE_CONTENT = `
     /* Redacto Consent SDK Checkbox Styles */
     .redacto-checkbox-large {
       appearance: none !important;
@@ -721,8 +749,18 @@ var injectCheckboxStyles = () => {
       background-color: #2563eb !important;
     }
   `;
-  document.head.appendChild(style);
-  stylesInjected = true;
+var injectCheckboxStyles = (root) => {
+  if (typeof document === "undefined") return;
+  const existing = root instanceof Document ? root.getElementById(STYLE_ID) : root.querySelector(`#${STYLE_ID}`);
+  if (existing) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE_CONTENT;
+  if (root instanceof Document) {
+    root.head.appendChild(style);
+  } else {
+    root.appendChild(style);
+  }
 };
 
 // src/styles/modal.ts
@@ -777,7 +815,8 @@ var styles = {
   topSection: {
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "flex-start",
+    gap: "10px",
     paddingBottom: "15px",
     borderBottom: "none",
     backgroundColor: "#ffffff",
@@ -789,6 +828,8 @@ var styles = {
     display: "flex",
     alignItems: "center",
     gap: "10px",
+    flex: "1 1 0",
+    minWidth: 0,
     margin: 0,
     padding: 0,
     boxSizing: "border-box"
@@ -796,7 +837,9 @@ var styles = {
   logo: {
     height: "32px",
     width: "auto",
+    maxWidth: "140px",
     objectFit: "contain",
+    flexShrink: 0,
     margin: 0,
     padding: 0,
     display: "block"
@@ -808,6 +851,10 @@ var styles = {
     letterSpacing: "0.2px",
     verticalAlign: "middle",
     color: "#101828",
+    flex: "1 1 auto",
+    minWidth: 0,
+    wordBreak: "normal",
+    overflowWrap: "anywhere",
     margin: 0,
     padding: 0,
     textAlign: "left"
@@ -819,6 +866,7 @@ var styles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
+    flexShrink: 0,
     fontWeight: 400,
     fontSize: "12px",
     lineHeight: "150%",
@@ -1303,12 +1351,41 @@ function createGreenCheckmark(size, ariaLabel) {
 }
 
 // src/modal/language-selector.ts
+var LANGUAGE_NATIVE_LABELS = {
+  English: "English",
+  Assamese: "\u0985\u09B8\u09AE\u09C0\u09AF\u09BC\u09BE (Assamese)",
+  Bengali: "\u09AC\u09BE\u0982\u09B2\u09BE (Bengali)",
+  Bodo: "\u092C\u0921\u093C\u094B (Bodo)",
+  Dogri: "\u0921\u094B\u0917\u0930\u0940 (Dogri)",
+  "Goan Konkani": "\u0915\u094B\u0902\u0915\u0923\u0940 (Goan Konkani)",
+  Gujarati: "\u0A97\u0AC1\u0A9C\u0AB0\u0ABE\u0AA4\u0AC0 (Gujarati)",
+  Hindi: "\u0939\u093F\u0928\u094D\u0926\u0940 (Hindi)",
+  Kannada: "\u0C95\u0CA8\u0CCD\u0CA8\u0CA1 (Kannada)",
+  Kashmiri: "\u0643\u0672\u0634\u064F\u0631 (Kashmiri)",
+  Maithili: "\u092E\u0948\u0925\u093F\u0932\u0940 (Maithili)",
+  Malayalam: "\u0D2E\u0D32\u0D2F\u0D3E\u0D33\u0D02 (Malayalam)",
+  Manipuri: "\uABC3\uABE9\uABC7\uABE9\uABC2\uABE3\uABDF (Manipuri)",
+  Marathi: "\u092E\u0930\u093E\u0920\u0940 (Marathi)",
+  Nepali: "\u0928\u0947\u092A\u093E\u0932\u0940 (Nepali)",
+  Odia: "\u0B13\u0B21\u0B3C\u0B3F\u0B06 (Odia)",
+  Punjabi: "\u0A2A\u0A70\u0A1C\u0A3E\u0A2C\u0A40 (Punjabi)",
+  Sanskrit: "\u0938\u0902\u0938\u094D\u0915\u0943\u0924\u092E\u094D (Sanskrit)",
+  Santali: "\u1C65\u1C5F\u1C71\u1C5B\u1C5F\u1C72\u1C64 (Santali)",
+  Sindhi: "\u0633\u0646\u068C\u064A (Sindhi)",
+  Tamil: "\u0BA4\u0BAE\u0BBF\u0BB4\u0BCD (Tamil)",
+  Telugu: "\u0C24\u0C46\u0C32\u0C41\u0C17\u0C41 (Telugu)",
+  Urdu: "\u0627\u0631\u062F\u0648 (Urdu)"
+};
+var toNativeLabel = (name) => {
+  var _a;
+  return (_a = LANGUAGE_NATIVE_LABELS[name]) != null ? _a : name;
+};
 function renderLanguageSelector(options) {
   var _a, _b, _c, _d;
-  const { languages, selectedLanguage, settings, onSelect } = options;
+  const { languages, selectedLanguage, settings, onSelect, dropdownContainer } = options;
   let isOpen = false;
   const buttonText = el("span");
-  buttonText.textContent = selectedLanguage;
+  buttonText.textContent = toNativeLabel(selectedLanguage);
   const chevronSvg = svg(
     "svg",
     {
@@ -1337,7 +1414,7 @@ function renderLanguageSelector(options) {
     tabIndex: "0",
     "aria-haspopup": "listbox",
     "aria-expanded": "false",
-    "aria-label": `Language selector, current: ${selectedLanguage}`,
+    "aria-label": `Language selector, current: ${toNativeLabel(selectedLanguage)}`,
     onClick: () => toggleDropdown(),
     onKeydown: (e) => {
       if (e.key === "Enter" || e.key === " ") {
@@ -1394,13 +1471,11 @@ function renderLanguageSelector(options) {
         e.target.style.backgroundColor = isSelected ? "#f3f4f6" : "#ffffff";
       }
     });
-    item.textContent = lang;
+    item.textContent = toNativeLabel(lang);
     dropdown.appendChild(item);
   }
   const container = el("div", { style: styles.languageSelectorContainer }, button);
-  if (typeof document !== "undefined") {
-    document.body.appendChild(dropdown);
-  }
+  dropdownContainer.appendChild(dropdown);
   function positionDropdown() {
     const rect = button.getBoundingClientRect();
     dropdown.style.top = `${rect.bottom + 4}px`;
@@ -1408,10 +1483,14 @@ function renderLanguageSelector(options) {
     dropdown.style.left = "auto";
   }
   const clickOutsideHandler = (e) => {
-    const target = e.target;
-    if (!container.contains(target) && !dropdown.contains(target)) {
-      closeDropdown();
-    }
+    var _a2, _b2;
+    const path = (_b2 = (_a2 = e.composedPath) == null ? void 0 : _a2.call(e)) != null ? _b2 : [];
+    if (path.includes(container) || path.includes(dropdown)) return;
+    if (path.length === 0) {
+      const target = e.target;
+      if (container.contains(target) || dropdown.contains(target)) return;
+    }
+    closeDropdown();
   };
   const repositionHandler = () => {
     if (isOpen) positionDropdown();
@@ -1444,6 +1523,7 @@ function renderLanguageSelector(options) {
 // src/modal/keyboard.ts
 function setupKeyboardTrap(modalEl, onEscape) {
   const handler = (e) => {
+    var _a;
     if (e.key === "Escape") {
       e.preventDefault();
       onEscape();
@@ -1462,13 +1542,15 @@ function setupKeyboardTrap(modalEl, onEscape) {
       }
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
+      const root = modalEl.getRootNode();
+      const active = (_a = root.activeElement) != null ? _a : document.activeElement;
       if (e.shiftKey) {
-        if (document.activeElement === first) {
+        if (active === first) {
           e.preventDefault();
           last.focus();
         }
       } else {
-        if (document.activeElement === last) {
+        if (active === last) {
           e.preventDefault();
           first.focus();
         }
@@ -1558,7 +1640,15 @@ var DPO_AUDIO_ELEMENT_MAP = [
 
 // src/modal/tts.ts
 var TTSManager = class {
-  constructor(onStateChange) {
+  /**
+   * @param onStateChange Invoked whenever playback state changes so the host
+   *   can refresh its UI (e.g. swap the play/pause icon).
+   * @param root The root in which to look up highlightable elements by id.
+   *   When the modal is rendered inside a shadow root, pass that shadow root
+   *   so queries stay scoped to the SDK's tree (and don't accidentally hit
+   *   element ids that the host page also defines).
+   */
+  constructor(onStateChange, root) {
     this.audioUrls = null;
     this.audioSequence = [];
     this.elementIdSequence = [];
@@ -1570,6 +1660,7 @@ var TTSManager = class {
     this.highlightedElementId = null;
     this.abortController = null;
     this.onStateChange = onStateChange;
+    this.root = root;
   }
   get isPlaying() {
     return this._isPlaying;
@@ -1582,9 +1673,11 @@ var TTSManager = class {
   }
   async fetchAudioUrls(params) {
     var _a;
-    this.stop();
+    this.stopInternal();
     this._isAvailable = false;
     this.audioUrls = null;
+    this.audioSequence = [];
+    this.elementIdSequence = [];
     this.onStateChange();
     (_a = this.abortController) == null ? void 0 : _a.abort();
     this.abortController = new AbortController();
@@ -1597,13 +1690,15 @@ var TTSManager = class {
         signal: this.abortController.signal
       });
       this.audioUrls = response.detail;
-      this._isAvailable = true;
       this.buildSequences(params.content);
+      this._isAvailable = this.audioSequence.length > 0;
       this.onStateChange();
     } catch (error) {
       if (error.name !== "AbortError") {
         this._isAvailable = false;
         this.audioUrls = null;
+        this.audioSequence = [];
+        this.elementIdSequence = [];
         this.onStateChange();
       }
     }
@@ -1677,6 +1772,16 @@ var TTSManager = class {
     }
   }
   stop() {
+    this.stopInternal();
+    this.onStateChange();
+  }
+  /**
+   * Internal stop used by code paths (like fetchAudioUrls) that will fire
+   * their own onStateChange after composing a richer state update — we don't
+   * want the intermediate notification to flicker the UI based on a half-set
+   * state (e.g. _isAvailable still true from the previous language).
+   */
+  stopInternal() {
     if (this.currentAudio) {
       this.currentAudio.pause();
       this.currentAudio.currentTime = 0;
@@ -1687,7 +1792,6 @@ var TTSManager = class {
     this.currentIndex = 0;
     this.removeHighlights();
     this.highlightedElementId = null;
-    this.onStateChange();
   }
   destroy() {
     var _a;
@@ -1728,7 +1832,7 @@ var TTSManager = class {
     this.removeHighlights();
     this.highlightedElementId = elementId;
     setTimeout(() => {
-      const element = document.getElementById(elementId);
+      const element = "getElementById" in this.root ? this.root.getElementById(elementId) : this.root.querySelector(`#${CSS.escape(elementId)}`);
       if (element) {
         element.classList.add("redacto-tts-highlight");
         const rect = element.getBoundingClientRect();
@@ -1744,7 +1848,7 @@ var TTSManager = class {
     }, 50);
   }
   removeHighlights() {
-    document.querySelectorAll(".redacto-tts-highlight").forEach((el2) => {
+    this.root.querySelectorAll(".redacto-tts-highlight").forEach((el2) => {
       el2.classList.remove("redacto-tts-highlight");
     });
   }
@@ -2551,6 +2655,10 @@ function resolveColors(settings, activeConfig) {
 // src/modal/index.ts
 var ModalController = class {
   constructor(options) {
+    this.hostEl = null;
+    this.shadowRoot = null;
+    this.previousBodyOverflow = null;
+    this.previousHtmlOverflow = null;
     this.overlayEl = null;
     this.modalEl = null;
     this.purposeRefs = null;
@@ -2559,6 +2667,7 @@ var ModalController = class {
     this.keyboardCleanup = null;
     this.abortController = null;
     this.unsubscribe = null;
+    this.ttsManager = null;
     this.guardianFormRefs = null;
     this.statusPollTimeout = null;
     this.popupCheckInterval = null;
@@ -2610,10 +2719,8 @@ var ModalController = class {
       guardianFormData: { guardianName: "", guardianContact: "", guardianRelationship: "" }
     });
     this.mediaQuery = createMediaQuery("(max-width: 768px)");
-    this.ttsManager = new TTSManager(() => this.updateTTSButton());
   }
   async init() {
-    injectCheckboxStyles();
     this.unsubscribe = this.store.subscribe((state, prevState) => {
       this.handleStateChange(state, prevState);
     });
@@ -2627,18 +2734,22 @@ var ModalController = class {
     (_b = this.keyboardCleanup) == null ? void 0 : _b.call(this);
     (_c = this.unsubscribe) == null ? void 0 : _c.call(this);
     this.mediaQuery.destroy();
-    this.ttsManager.destroy();
+    (_d = this.ttsManager) == null ? void 0 : _d.destroy();
     this.stopPolling();
     this.store.destroy();
-    if (((_d = this.langSelectorRefs) == null ? void 0 : _d.dropdown) && document.body.contains(this.langSelectorRefs.dropdown)) {
-      document.body.removeChild(this.langSelectorRefs.dropdown);
+    if (this.hostEl && this.hostEl.parentNode) {
+      this.hostEl.parentNode.removeChild(this.hostEl);
     }
-    if (this.overlayEl && document.body.contains(this.overlayEl)) {
-      document.body.removeChild(this.overlayEl);
+    if (this.previousBodyOverflow !== null) {
+      document.body.style.overflow = this.previousBodyOverflow;
+      this.previousBodyOverflow = null;
     }
-    if (this.modalEl && document.body.contains(this.modalEl)) {
-      document.body.removeChild(this.modalEl);
+    if (this.previousHtmlOverflow !== null) {
+      document.documentElement.style.overflow = this.previousHtmlOverflow;
+      this.previousHtmlOverflow = null;
     }
+    this.hostEl = null;
+    this.shadowRoot = null;
     this.overlayEl = null;
     this.modalEl = null;
     this.purposeRefs = null;
@@ -2807,13 +2918,32 @@ var ModalController = class {
     }
   }
   renderOverlayWithLoading() {
+    this.hostEl = document.createElement("div");
+    this.hostEl.setAttribute("data-redacto-consent", "");
+    this.hostEl.style.position = "fixed";
+    this.hostEl.style.top = "0";
+    this.hostEl.style.left = "0";
+    this.hostEl.style.width = "0";
+    this.hostEl.style.height = "0";
+    this.hostEl.style.zIndex = "2147483646";
+    document.body.appendChild(this.hostEl);
+    this.shadowRoot = this.hostEl.attachShadow({ mode: "open" });
+    this.previousBodyOverflow = document.body.style.overflow;
+    this.previousHtmlOverflow = document.documentElement.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+    injectCheckboxStyles(this.shadowRoot);
+    this.ttsManager = new TTSManager(
+      () => this.updateTTSButton(),
+      this.shadowRoot
+    );
     const blockUI = this.options.blockUI !== false;
     if (blockUI) {
       this.overlayEl = el("div", {
         style: styles.overlay,
         role: "presentation"
       });
-      document.body.appendChild(this.overlayEl);
+      this.shadowRoot.appendChild(this.overlayEl);
     }
     const settingsObj = this.options.settings;
     const modalStyle = { ...styles.modal };
@@ -2839,10 +2969,10 @@ var ModalController = class {
     );
     const contentEl = el("div", { style: styles.content }, loadingEl);
     this.modalEl.appendChild(contentEl);
-    document.body.appendChild(this.modalEl);
+    this.shadowRoot.appendChild(this.modalEl);
   }
   rebuildUI() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const state = this.store.getState();
     if (!state.content || !this.modalEl) return;
     const activeConfig = state.content.detail.active_config;
@@ -2923,15 +3053,22 @@ var ModalController = class {
     const textColor = colors.text;
     const linkColor = colors.link;
     const font = colors.font;
-    const logoImg = activeConfig.logo_url ? el("img", { src: activeConfig.logo_url, style: styles.logo, alt: "Logo" }) : null;
+    const logoImg = activeConfig.logo_url ? el("img", {
+      src: activeConfig.logo_url,
+      style: {
+        ...styles.logo,
+        maxWidth: isMobile ? "96px" : "140px",
+        maxHeight: isMobile ? "28px" : "32px"
+      },
+      alt: "Logo"
+    }) : null;
     this.noticeTitleEl = el("span", {
       id: "privacy-notice-title",
       style: { ...styles.title, color: headingColor, fontFamily: font, fontSize: isMobile ? "16px" : "18px" }
     });
     this.noticeTitleEl.textContent = this.getTranslatedText("notice_banner_heading", activeConfig.notice_banner_heading);
-    const topLeft = el("div", { style: styles.topLeft }, logoImg, this.noticeTitleEl);
-    if (((_d = this.langSelectorRefs) == null ? void 0 : _d.dropdown) && document.body.contains(this.langSelectorRefs.dropdown)) {
-      document.body.removeChild(this.langSelectorRefs.dropdown);
+    if (((_d = this.langSelectorRefs) == null ? void 0 : _d.dropdown) && this.shadowRoot && this.langSelectorRefs.dropdown.parentNode === this.shadowRoot) {
+      this.shadowRoot.removeChild(this.langSelectorRefs.dropdown);
     }
     const supportedLangs = Object.keys(activeConfig.supported_languages_and_translations || {});
     const allLanguages = [activeConfig.default_language || "English", ...supportedLangs.filter((l) => l !== activeConfig.default_language)];
@@ -2939,7 +3076,8 @@ var ModalController = class {
       languages: allLanguages,
       selectedLanguage: state.selectedLanguage,
       settings: settingsObj,
-      onSelect: (lang) => this.handleLanguageSelect(lang)
+      onSelect: (lang) => this.handleLanguageSelect(lang),
+      dropdownContainer: this.shadowRoot
     });
     const ttsStrokeColor = ((_f = (_e = settingsObj == null ? void 0 : settingsObj.button) == null ? void 0 : _e.language) == null ? void 0 : _f.textColor) || "currentColor";
     const speakerSvg = svg(
@@ -2970,10 +3108,13 @@ var ModalController = class {
       type: "button",
       "aria-label": "Start audio playback",
       title: "Start Talkback",
-      onClick: () => this.ttsManager.toggle()
+      onClick: () => {
+        var _a2;
+        return (_a2 = this.ttsManager) == null ? void 0 : _a2.toggle();
+      }
     });
     this.ttsButton.appendChild(speakerSvg);
-    this.ttsManager.fetchAudioUrls({
+    (_g = this.ttsManager) == null ? void 0 : _g.fetchAudioUrls({
       accessToken: this.options.accessToken,
       baseUrl: this.options.baseUrl,
       noticeUuid: activeConfig.notice_uuid,
@@ -2981,9 +3122,44 @@ var ModalController = class {
       content: activeConfig
     });
     const topRight = el("div", {
-      style: { display: "flex", alignItems: "center", gap: "8px" }
+      style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }
     }, this.ttsButton, this.langSelectorRefs.container);
-    const topSection = el("div", { style: styles.topSection }, topLeft, topRight);
+    let topSection;
+    if (isMobile) {
+      const headerRow = el(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            width: "100%"
+          }
+        },
+        ...logoImg ? [logoImg] : [],
+        el(
+          "div",
+          { style: { marginLeft: "auto", display: "flex", alignItems: "center" } },
+          topRight
+        )
+      );
+      topSection = el(
+        "div",
+        {
+          style: {
+            ...styles.topSection,
+            flexDirection: "column",
+            alignItems: "stretch",
+            flexWrap: "nowrap"
+          }
+        },
+        headerRow,
+        this.noticeTitleEl
+      );
+    } else {
+      const topLeft = el("div", { style: styles.topLeft }, logoImg, this.noticeTitleEl);
+      topSection = el("div", { style: styles.topSection }, topLeft, topRight);
+    }
     this.middleSection = el("div", { style: styles.middleSection });
     const baseTextStyle = { ...styles.privacyText, color: textColor, fontFamily: font, fontSize: isMobile ? "14px" : "16px" };
     const noticeTextSpan = el("span", { id: "privacy-notice-text" });
@@ -3228,7 +3404,7 @@ var ModalController = class {
     );
     this.modalEl.appendChild(contentWrapper);
     this.updateAcceptButtonState(state);
-    (_g = this.keyboardCleanup) == null ? void 0 : _g.call(this);
+    (_h = this.keyboardCleanup) == null ? void 0 : _h.call(this);
     this.keyboardCleanup = setupKeyboardTrap(this.modalEl, () => this.handleDecline());
   }
   getLanguageCode(displayLanguage) {
@@ -3786,54 +3962,56 @@ var ModalController = class {
   // ─── TTS ───
   updateTTSButton() {
     var _a, _b, _c;
-    if (!this.ttsButton) return;
-    if (this.ttsManager.isAvailable) {
-      this.ttsButton.style.display = "flex";
-      clearElement(this.ttsButton);
-      const strokeColor = ((_c = (_b = (_a = this.options.settings) == null ? void 0 : _a.button) == null ? void 0 : _b.language) == null ? void 0 : _c.textColor) || "currentColor";
-      if (this.ttsManager.isPlaying) {
-        const pauseSvg = svg(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "16",
-            height: "16",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: strokeColor,
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "aria-hidden": "true"
-          },
-          svg("rect", { x: "6", y: "4", width: "4", height: "16" }),
-          svg("rect", { x: "14", y: "4", width: "4", height: "16" })
-        );
-        this.ttsButton.appendChild(pauseSvg);
-        this.ttsButton.setAttribute("aria-label", "Pause audio playback");
-        this.ttsButton.setAttribute("title", "Pause Talkback");
-      } else {
-        const speakerSvg = svg(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "16",
-            height: "16",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: strokeColor,
-            "stroke-width": "2",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round",
-            "aria-hidden": "true"
-          },
-          svg("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
-          svg("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" })
-        );
-        this.ttsButton.appendChild(speakerSvg);
-        this.ttsButton.setAttribute("aria-label", this.ttsManager.isPaused ? "Resume audio playback" : "Start audio playback");
-        this.ttsButton.setAttribute("title", this.ttsManager.isPaused ? "Resume Talkback" : "Start Talkback");
-      }
+    if (!this.ttsButton || !this.ttsManager) return;
+    if (!this.ttsManager.isAvailable) {
+      this.ttsButton.style.display = "none";
+      return;
+    }
+    this.ttsButton.style.display = "flex";
+    clearElement(this.ttsButton);
+    const strokeColor = ((_c = (_b = (_a = this.options.settings) == null ? void 0 : _a.button) == null ? void 0 : _b.language) == null ? void 0 : _c.textColor) || "currentColor";
+    if (this.ttsManager.isPlaying) {
+      const pauseSvg = svg(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: strokeColor,
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        },
+        svg("rect", { x: "6", y: "4", width: "4", height: "16" }),
+        svg("rect", { x: "14", y: "4", width: "4", height: "16" })
+      );
+      this.ttsButton.appendChild(pauseSvg);
+      this.ttsButton.setAttribute("aria-label", "Pause audio playback");
+      this.ttsButton.setAttribute("title", "Pause Talkback");
+    } else {
+      const speakerSvg = svg(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: strokeColor,
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        },
+        svg("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+        svg("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" })
+      );
+      this.ttsButton.appendChild(speakerSvg);
+      this.ttsButton.setAttribute("aria-label", this.ttsManager.isPaused ? "Resume audio playback" : "Start audio playback");
+      this.ttsButton.setAttribute("title", this.ttsManager.isPaused ? "Resume Talkback" : "Start Talkback");
     }
   }
   updateButtonStates(state) {
@@ -4153,6 +4331,8 @@ function renderInlinePurposes(purposes, options) {
 var InlineController = class {
   constructor(options) {
     this.targetEl = null;
+    this.hostEl = null;
+    this.shadowRoot = null;
     this.rootEl = null;
     this.purposeRefs = null;
     this.errorEl = null;
@@ -4174,7 +4354,6 @@ var InlineController = class {
     this.mediaQuery = createMediaQuery("(max-width: 768px)");
   }
   async init() {
-    injectCheckboxStyles();
     if (typeof this.options.target === "string") {
       this.targetEl = document.querySelector(this.options.target);
       if (!this.targetEl) {
@@ -4183,6 +4362,12 @@ var InlineController = class {
     } else {
       this.targetEl = this.options.target;
     }
+    this.hostEl = document.createElement("div");
+    this.hostEl.setAttribute("data-redacto-consent-inline", "");
+    this.hostEl.style.display = "block";
+    this.targetEl.appendChild(this.hostEl);
+    this.shadowRoot = this.hostEl.attachShadow({ mode: "open" });
+    injectCheckboxStyles(this.shadowRoot);
     this.unsubscribe = this.store.subscribe((state, prevState) => {
       this.handleStateChange(state, prevState);
     });
@@ -4195,9 +4380,11 @@ var InlineController = class {
     (_a = this.unsubscribe) == null ? void 0 : _a.call(this);
     this.mediaQuery.destroy();
     this.store.destroy();
-    if (this.targetEl && this.rootEl) {
-      this.targetEl.removeChild(this.rootEl);
+    if (this.hostEl && this.hostEl.parentNode) {
+      this.hostEl.parentNode.removeChild(this.hostEl);
     }
+    this.hostEl = null;
+    this.shadowRoot = null;
     this.rootEl = null;
     this.purposeRefs = null;
   }
@@ -4253,8 +4440,8 @@ var InlineController = class {
       this.rebuildUI();
     }
     if (state.hasAlreadyConsented || state.fetchError) {
-      if (this.rootEl && this.targetEl) {
-        this.targetEl.removeChild(this.rootEl);
+      if (this.rootEl && this.shadowRoot && this.rootEl.parentNode === this.shadowRoot) {
+        this.shadowRoot.removeChild(this.rootEl);
         this.rootEl = null;
       }
       return;
@@ -4273,7 +4460,7 @@ var InlineController = class {
   }
   renderLoading() {
     var _a;
-    if (!this.targetEl) return;
+    if (!this.shadowRoot) return;
     const textColor = ((_a = this.options.settings) == null ? void 0 : _a.textColor) || "#344054";
     this.rootEl = el(
       "div",
@@ -4281,13 +4468,13 @@ var InlineController = class {
       el("div", { style: inlineStyles.loadingSpinner }),
       el("p", { style: { fontSize: "16px", fontWeight: 400, color: textColor } }, "Loading...")
     );
-    this.targetEl.appendChild(this.rootEl);
+    this.shadowRoot.appendChild(this.rootEl);
   }
   rebuildUI() {
     const state = this.store.getState();
-    if (!state.content || !this.targetEl) return;
-    if (this.rootEl && this.targetEl.contains(this.rootEl)) {
-      this.targetEl.removeChild(this.rootEl);
+    if (!state.content || !this.shadowRoot) return;
+    if (this.rootEl && this.rootEl.parentNode === this.shadowRoot) {
+      this.shadowRoot.removeChild(this.rootEl);
     }
     this.errorEl = el("div", {
       role: "alert",
@@ -4321,7 +4508,7 @@ var InlineController = class {
       this.errorEl,
       this.purposeRefs.container
     );
-    this.targetEl.appendChild(this.rootEl);
+    this.shadowRoot.appendChild(this.rootEl);
     this.notifyValidation(state);
   }
   getTranslatedText(key, defaultText, itemId) {
@@ -4548,7 +4735,7 @@ function getErrorMessage(errorCode) {
 }
 function handleDigilockerCallback(options) {
   var _a, _b, _c;
-  injectCheckboxStyles();
+  injectCheckboxStyles(document);
   const params = new URLSearchParams(window.location.search);
   const sessionToken = params.get("session_token");
   const urlStatus = params.get("status");