Centralize help-icon overlay behavior across styleguide demos

components/interactive-elements.html

@@ -638,6 +638,7 @@
     </p>
   </section>
 
+  <script src="../scripts/help-icon-overlays.js"></script>
   <script>
     document.querySelectorAll('.sg-mode-toggle:not(.sg-activation-mode-toggle)').forEach((toggle) => {
       toggle.addEventListener('click', () => {
@@ -1098,60 +1099,9 @@
       });
     });
 
-    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+    window.sgInitHelpIconOverlays({
-      const button = wrap.querySelector('.sg-help-icon');
+      closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      const panel = wrap.querySelector('.sg-help-icon-panel');
+      outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-
-      if (!button || !panel) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-help-icon');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-          const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-          demo.dataset.open = 'false';
-          if (trigger) {
-            trigger.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((menuWrap) => {
-          const menuButton = menuWrap.querySelector('.sg-sandwich-button');
-          menuWrap.dataset.open = 'false';
-          if (menuButton) {
-            menuButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        wrap.dataset.align = 'left';
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-
-        if (!nextState) {
-          return;
-        }
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
-          wrap.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
-      });
     });
 
     // Global close behavior for overlay-style controls.
@@ -1160,7 +1110,6 @@
       if (
         event.target.closest('.sg-sandwich-menu-wrap')
         || event.target.closest('.sg-pulldown-demo')
-        || event.target.closest('.sg-help-icon-wrap')
       ) {
         return;
       }
@@ -1181,13 +1130,6 @@
         }
       });
 
-      document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-        const button = wrap.querySelector('.sg-help-icon');
-        wrap.dataset.open = 'false';
-        if (button) {
-          button.setAttribute('aria-expanded', 'false');
-        }
-      });
     });
   </script>
 

patterns/card-listen-seite.html

@@ -746,6 +746,7 @@
     </div>
   </aside>
 
+  <script src="../scripts/help-icon-overlays.js"></script>
   <script>
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
@@ -878,14 +879,6 @@
           }
         });
 
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-
         demo.dataset.align = 'left';
         demo.dataset.open = String(nextState);
         trigger.setAttribute('aria-expanded', String(nextState));
@@ -931,53 +924,9 @@
     });
 
     document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
-
+    window.sgInitHelpIconOverlays({
-    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      const button = wrap.querySelector('.sg-help-icon');
+      outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      const panel = wrap.querySelector('.sg-help-icon-panel');
-
-      if (!button || !panel) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-help-icon');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-          const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-          demo.dataset.open = 'false';
-          if (trigger) {
-            trigger.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        wrap.dataset.align = 'left';
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-
-        if (!nextState) {
-          return;
-        }
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
-          wrap.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
-      });
     });
 
     document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
@@ -1066,15 +1015,7 @@
         });
       }
 
-      if (!event.target.closest('.sg-help-icon-wrap') && !event.target.closest('.sg-pulldown-demo')) {
+      if (!event.target.closest('.sg-pulldown-demo')) {
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-
         document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
           const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
           demo.dataset.open = 'false';

patterns/options-row.html

@@ -120,6 +120,7 @@
     </div>
   </section>
 
+  <script src="../scripts/help-icon-overlays.js"></script>
   <script>
 
     document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
@@ -193,14 +194,6 @@
           }
         });
 
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-
         demo.dataset.align = 'left';
         demo.dataset.open = String(nextState);
         trigger.setAttribute('aria-expanded', String(nextState));
@@ -282,67 +275,16 @@
 
     document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
 
-    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+    window.sgInitHelpIconOverlays({
-      const button = wrap.querySelector('.sg-help-icon');
+      closeOnOpenSelectors: ['.sg-pulldown-demo'],
-      const panel = wrap.querySelector('.sg-help-icon-panel');
+      outsideClickIgnoreSelectors: ['.sg-pulldown-demo'],
-
-      if (!button || !panel) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-help-icon');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-          const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-          demo.dataset.open = 'false';
-          if (trigger) {
-            trigger.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        wrap.dataset.align = 'left';
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-
-        if (!nextState) {
-          return;
-        }
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
-          wrap.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
-      });
     });
 
     document.addEventListener('click', (event) => {
-      if (event.target.closest('.sg-help-icon-wrap') || event.target.closest('.sg-pulldown-demo')) {
+      if (event.target.closest('.sg-pulldown-demo')) {
         return;
       }
 
-      document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-        const button = wrap.querySelector('.sg-help-icon');
-        wrap.dataset.open = 'false';
-        if (button) {
-          button.setAttribute('aria-expanded', 'false');
-        }
-      });
-
       document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
         const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
         demo.dataset.open = 'false';

patterns/portal-header.html

@@ -195,6 +195,7 @@
     </article>
   </section>
 
+  <script src="../scripts/help-icon-overlays.js"></script>
   <script>
     document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
       group.querySelectorAll('.sg-tab-button').forEach((button) => {
@@ -294,14 +295,6 @@
           }
         });
 
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-
         demo.dataset.align = 'left';
         demo.dataset.open = String(nextState);
         trigger.setAttribute('aria-expanded', String(nextState));
@@ -383,52 +376,9 @@
 
     document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
 
-    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+    window.sgInitHelpIconOverlays({
-      const button = wrap.querySelector('.sg-help-icon');
+      closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      const panel = wrap.querySelector('.sg-help-icon-panel');
+      outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-
-      if (!button || !panel) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-help-icon');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-          const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-          demo.dataset.open = 'false';
-          if (trigger) {
-            trigger.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        wrap.dataset.align = 'left';
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-
-        if (!nextState) {
-          return;
-        }
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
-          wrap.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
-      });
     });
 
     document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
@@ -466,18 +416,10 @@
         });
       }
 
-      if (event.target.closest('.sg-help-icon-wrap') || event.target.closest('.sg-pulldown-demo')) {
+      if (event.target.closest('.sg-pulldown-demo')) {
         return;
       }
 
-      document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-        const button = wrap.querySelector('.sg-help-icon');
-        wrap.dataset.open = 'false';
-        if (button) {
-          button.setAttribute('aria-expanded', 'false');
-        }
-      });
-
       document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
         const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
         demo.dataset.open = 'false';

patterns/vsf-card-listen-fundamentalanalyse-drawer.html

@@ -369,6 +369,7 @@
     </div>
   </section>
 
+  <script src="../scripts/help-icon-overlays.js"></script>
   <script>
     const businessModelToggleButton = document.getElementById('vsf-business-model-toggle');
     const businessModelText = document.getElementById('vsf-business-model-text');
@@ -414,89 +415,14 @@
             otherButton.setAttribute('aria-expanded', 'false');
           }
         });
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((helpWrap) => {
-          const helpButton = helpWrap.querySelector('.sg-help-icon');
-          helpWrap.dataset.open = 'false';
-          if (helpButton) {
-            helpButton.setAttribute('aria-expanded', 'false');
-          }
-        });
         wrap.dataset.open = String(nextState);
         button.setAttribute('aria-expanded', String(nextState));
       });
     });
 
-    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+    window.sgInitHelpIconOverlays({
-      const button = wrap.querySelector('.sg-help-icon');
+      closeOnOpenSelectors: ['.sg-sandwich-menu-wrap'],
-      const panel = wrap.querySelector('.sg-help-icon-panel');
+      outsideClickIgnoreSelectors: ['.sg-sandwich-menu-wrap'],
-      if (!button || !panel) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-help-icon');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((menuWrap) => {
-          const menuButton = menuWrap.querySelector('.sg-sandwich-button');
-          menuWrap.dataset.open = 'false';
-          if (menuButton) {
-            menuButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-        wrap.dataset.align = 'left';
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-        panel.style.removeProperty('transform');
-
-        if (!nextState) {
-          return;
-        }
-
-        const viewportWidth = window.visualViewport
-          ? window.visualViewport.width
-          : window.innerWidth;
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > viewportWidth) {
-          wrap.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
-
-        const clampedRect = panel.getBoundingClientRect();
-        const rootStyles = getComputedStyle(document.documentElement);
-        const spacingSmallRaw = rootStyles.getPropertyValue('--spacing-small').trim();
-        const rootFontSize = parseFloat(rootStyles.fontSize) || 16;
-        const spacingSmallValue = parseFloat(spacingSmallRaw);
-        const safeInset = Number.isNaN(spacingSmallValue)
-          ? 0
-          : (
-            spacingSmallRaw.endsWith('rem')
-              ? spacingSmallValue * rootFontSize
-              : spacingSmallValue
-          );
-        let shiftX = 0;
-
-        if (clampedRect.right > (viewportWidth - safeInset)) {
-          shiftX -= clampedRect.right - (viewportWidth - safeInset);
-        }
-        if ((clampedRect.left + shiftX) < safeInset) {
-          shiftX += safeInset - (clampedRect.left + shiftX);
-        }
-        if (shiftX !== 0) {
-          panel.style.transform = `translateX(${shiftX}px)`;
-        }
-      });
     });
 
     document.addEventListener('click', (event) => {
@@ -510,19 +436,6 @@
         });
       }
 
-      if (!event.target.closest('.sg-help-icon-wrap')) {
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          const panel = wrap.querySelector('.sg-help-icon-panel');
-          wrap.dataset.open = 'false';
-          if (panel) {
-            panel.style.removeProperty('transform');
-          }
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-      }
     });
 
     const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');

patterns/vsf-card-listen-seite.html

@@ -667,6 +667,7 @@
       </div>
     </div>
   </section>
+  <script src="../scripts/help-icon-overlays.js"></script>
   <script>
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
@@ -799,14 +800,6 @@
           }
         });
 
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-
         demo.dataset.align = 'left';
         demo.dataset.open = String(nextState);
         trigger.setAttribute('aria-expanded', String(nextState));
@@ -852,53 +845,9 @@
     });
 
     document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
-
+    window.sgInitHelpIconOverlays({
-    document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      const button = wrap.querySelector('.sg-help-icon');
+      outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
-      const panel = wrap.querySelector('.sg-help-icon-panel');
-
-      if (!button || !panel) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-help-icon');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
-          const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
-          demo.dataset.open = 'false';
-          if (trigger) {
-            trigger.setAttribute('aria-expanded', 'false');
-          }
-        });
-
-        wrap.dataset.align = 'left';
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
-
-        if (!nextState) {
-          return;
-        }
-
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.right > window.innerWidth) {
-          wrap.dataset.align = 'right';
-        }
-
-        const alignedPanelRect = panel.getBoundingClientRect();
-        if (alignedPanelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
-      });
     });
 
     document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
@@ -952,15 +901,7 @@
         });
       }
 
-      if (!event.target.closest('.sg-help-icon-wrap') && !event.target.closest('.sg-pulldown-demo')) {
+      if (!event.target.closest('.sg-pulldown-demo')) {
-        document.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
-          const button = wrap.querySelector('.sg-help-icon');
-          wrap.dataset.open = 'false';
-          if (button) {
-            button.setAttribute('aria-expanded', 'false');
-          }
-        });
-
         document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
           const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
           demo.dataset.open = 'false';

scripts/help-icon-overlays.js

@@ -0,0 +1,129 @@
+(function initHelpIconOverlayModule() {
+  const CLOSE_HANDLERS = {
+    '.sg-pulldown-demo': (root) => {
+      root.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
+        const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
+        demo.dataset.open = 'false';
+        if (trigger) {
+          trigger.setAttribute('aria-expanded', 'false');
+        }
+      });
+    },
+    '.sg-sandwich-menu-wrap': (root) => {
+      root.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+        const button = wrap.querySelector('.sg-sandwich-button');
+        wrap.dataset.open = 'false';
+        if (button) {
+          button.setAttribute('aria-expanded', 'false');
+        }
+      });
+    },
+  };
+
+  const getViewportWidth = () => {
+    if (window.visualViewport && typeof window.visualViewport.width === 'number') {
+      return window.visualViewport.width;
+    }
+    return window.innerWidth;
+  };
+
+  const getSafeInsetPx = () => {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const spacingSmallRaw = rootStyles.getPropertyValue('--spacing-small').trim();
+    const rootFontSize = parseFloat(rootStyles.fontSize) || 16;
+    const spacingSmallValue = parseFloat(spacingSmallRaw);
+    if (Number.isNaN(spacingSmallValue)) {
+      return 0;
+    }
+    if (spacingSmallRaw.endsWith('rem')) {
+      return spacingSmallValue * rootFontSize;
+    }
+    return spacingSmallValue;
+  };
+
+  const closeAllHelpIcons = (root) => {
+    root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-help-icon');
+      const panel = wrap.querySelector('.sg-help-icon-panel');
+      wrap.dataset.open = 'false';
+      if (panel) {
+        panel.style.removeProperty('transform');
+      }
+      if (button) {
+        button.setAttribute('aria-expanded', 'false');
+      }
+    });
+  };
+
+  window.sgInitHelpIconOverlays = (options = {}) => {
+    const root = options.root || document;
+    const closeOnOpenSelectors = options.closeOnOpenSelectors || [];
+    const outsideClickIgnoreSelectors = options.outsideClickIgnoreSelectors || [];
+
+    root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      if (wrap.dataset.helpIconInit === 'true') {
+        return;
+      }
+      wrap.dataset.helpIconInit = 'true';
+
+      const button = wrap.querySelector('.sg-help-icon');
+      const panel = wrap.querySelector('.sg-help-icon-panel');
+      if (!button || !panel) {
+        return;
+      }
+
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const nextState = wrap.dataset.open !== 'true';
+
+        closeAllHelpIcons(root);
+        closeOnOpenSelectors.forEach((selector) => {
+          const handler = CLOSE_HANDLERS[selector];
+          if (handler) {
+            handler(root);
+          }
+        });
+
+        if (!nextState) {
+          return;
+        }
+
+        wrap.dataset.align = 'left';
+        wrap.dataset.open = 'true';
+        button.setAttribute('aria-expanded', 'true');
+
+        const viewportWidth = getViewportWidth();
+        const panelRect = panel.getBoundingClientRect();
+        if (panelRect.right > viewportWidth) {
+          wrap.dataset.align = 'right';
+        }
+        const alignedPanelRect = panel.getBoundingClientRect();
+        if (alignedPanelRect.left < 0) {
+          wrap.dataset.align = 'left';
+        }
+
+        const clampedRect = panel.getBoundingClientRect();
+        const safeInset = getSafeInsetPx();
+        let shiftX = 0;
+        if (clampedRect.right > (viewportWidth - safeInset)) {
+          shiftX -= clampedRect.right - (viewportWidth - safeInset);
+        }
+        if ((clampedRect.left + shiftX) < safeInset) {
+          shiftX += safeInset - (clampedRect.left + shiftX);
+        }
+        if (shiftX !== 0) {
+          panel.style.transform = `translateX(${shiftX}px)`;
+        }
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      const isInsideIgnoredZone = ['.sg-help-icon-wrap', ...outsideClickIgnoreSelectors]
+        .some((selector) => event.target.closest(selector));
+      if (isInsideIgnoredZone) {
+        return;
+      }
+      closeAllHelpIcons(root);
+    });
+  };
+})();