@x-plat/design-system 0.14.13 → 0.14.15

package/dist/components/Dropdown/index.cjs

@@ -55,26 +55,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -229,22 +230,22 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.useEffect(() => {
-    if (!enabled) return;
-    const onScroll = (e) => {
-      const target = e.target;
-      if (target === document || target === document.documentElement || target === document.body) {
-        return;
-      }
-      if (target instanceof Node && popRef.current?.contains(target)) return;
-      onCloseRef.current();
-    };
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [enabled, popRef]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -274,7 +275,7 @@ var Dropdown = (props) => {
   const menuRef = import_react4.default.useRef(null);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
+  useCloseWhenTriggerHidden(isOpen, triggerRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Dropdown/index.css

@@ -19,11 +19,11 @@
   box-shadow: var(--semantic-shadow-md);
   padding: var(--spacing-space-1) 0;
   opacity: 0;
-  transform: translateY(-4px);
+  transform: translateY(4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
 }
 .lib-xplat-dropdown-menu.bottom {
-  transform: translateY(4px);
+  transform: translateY(-4px);
 }
 .lib-xplat-dropdown-menu.visible {
   opacity: 1;

package/dist/components/Dropdown/index.js

@@ -19,26 +19,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -193,22 +194,22 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.useEffect(() => {
-    if (!enabled) return;
-    const onScroll = (e) => {
-      const target = e.target;
-      if (target === document || target === document.documentElement || target === document.body) {
-        return;
-      }
-      if (target instanceof Node && popRef.current?.contains(target)) return;
-      onCloseRef.current();
-    };
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [enabled, popRef]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -238,7 +239,7 @@ var Dropdown = (props) => {
   const menuRef = React4.useRef(null);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
+  useCloseWhenTriggerHidden(isOpen, triggerRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Modal/index.cjs

@@ -35,11 +35,16 @@ __export(Modal_exports, {
 module.exports = __toCommonJS(Modal_exports);
 
 // src/components/Modal/Modal.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+var import_react2 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -53,7 +58,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -67,8 +72,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = import_react.default.useRef(null);
-  import_react.default.useEffect(() => {
+  const restoreRef = import_react2.default.useRef(null);
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -86,7 +91,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -134,13 +139,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react2.default.useState(false);
-  const [visible, setVisible] = import_react2.default.useState(false);
-  const [settled, setSettled] = import_react2.default.useState(false);
-  const boxRef = import_react2.default.useRef(null);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  const [visible, setVisible] = import_react3.default.useState(false);
+  const [settled, setSettled] = import_react3.default.useState(false);
+  const boxRef = import_react3.default.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);

package/dist/components/Modal/index.js

@@ -1,9 +1,14 @@
 // src/components/Modal/Modal.tsx
-import React2 from "react";
+import React3 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+import React2 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -17,7 +22,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -31,8 +36,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = React.useRef(null);
-  React.useEffect(() => {
+  const restoreRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -50,7 +55,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -98,13 +103,13 @@ import { jsx } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React2.useState(false);
-  const [visible, setVisible] = React2.useState(false);
-  const [settled, setSettled] = React2.useState(false);
-  const boxRef = React2.useRef(null);
+  const [mounted, setMounted] = React3.useState(false);
+  const [visible, setVisible] = React3.useState(false);
+  const [settled, setSettled] = React3.useState(false);
+  const boxRef = React3.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);

package/dist/components/PopOver/index.cjs

@@ -55,26 +55,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -229,22 +230,22 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.useEffect(() => {
-    if (!enabled) return;
-    const onScroll = (e) => {
-      const target = e.target;
-      if (target === document || target === document.documentElement || target === document.body) {
-        return;
-      }
-      if (target instanceof Node && popRef.current?.contains(target)) return;
-      onCloseRef.current();
-    };
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [enabled, popRef]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -272,7 +273,7 @@ var PopOver = (props) => {
   const [localOpen, setLocalOpen] = import_react4.default.useState(false);
   const [eventTrigger, setEventTrigger] = import_react4.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
-  useCloseOnContainerScroll(isOpen, popRef, onClose);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/PopOver/index.js

@@ -19,26 +19,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -193,22 +194,22 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.useEffect(() => {
-    if (!enabled) return;
-    const onScroll = (e) => {
-      const target = e.target;
-      if (target === document || target === document.documentElement || target === document.body) {
-        return;
-      }
-      if (target instanceof Node && popRef.current?.contains(target)) return;
-      onCloseRef.current();
-    };
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [enabled, popRef]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -236,7 +237,7 @@ var PopOver = (props) => {
   const [localOpen, setLocalOpen] = React4.useState(false);
   const [eventTrigger, setEventTrigger] = React4.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
-  useCloseOnContainerScroll(isOpen, popRef, onClose);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Select/index.cjs

@@ -56,26 +56,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -230,22 +231,22 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.useEffect(() => {
-    if (!enabled) return;
-    const onScroll = (e) => {
-      const target = e.target;
-      if (target === document || target === document.documentElement || target === document.body) {
-        return;
-      }
-      if (target instanceof Node && popRef.current?.contains(target)) return;
-      onCloseRef.current();
-    };
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [enabled, popRef]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // src/tokens/svg/action/CopyIcon.tsx
@@ -1403,7 +1404,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = import_react6.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Select/index.css

@@ -212,7 +212,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .lib-xplat-select-content.bottom {
-  transform: translateY(8px);
+  transform: translateY(-4px);
 }
 .lib-xplat-select-content.bottom.visible {
   opacity: 1;
@@ -220,12 +220,12 @@
 }
 .lib-xplat-select-content.bottom.exit {
   opacity: 0;
-  transform: translateY(8px);
+  transform: translateY(-4px);
 }
 .lib-xplat-select-content {
 }
 .lib-xplat-select-content.top {
-  transform: translateY(-8px);
+  transform: translateY(4px);
 }
 .lib-xplat-select-content.top.visible {
   opacity: 1;
@@ -233,7 +233,7 @@
 }
 .lib-xplat-select-content.top.exit {
   opacity: 0;
-  transform: translateY(-8px);
+  transform: translateY(4px);
 }
 .lib-xplat-select-content.sm .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-2);

package/dist/components/Select/index.js

@@ -19,26 +19,27 @@ var findScrollParent = (el) => {
   }
   return null;
 };
+var TRIGGER_GAP = 8;
 var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
   let direction;
   let top;
   let maxHeight = null;
   if (popH <= roomBelow) {
     direction = "bottom";
-    top = triggerRect.bottom;
+    top = triggerRect.bottom + TRIGGER_GAP;
   } else if (popH <= roomAbove) {
     direction = "top";
-    top = triggerRect.top - popH;
+    top = triggerRect.top - TRIGGER_GAP - popH;
   } else {
     const room = Math.max(roomBelow, roomAbove, 0);
     if (roomBelow >= roomAbove) {
       direction = "bottom";
-      top = triggerRect.bottom;
+      top = triggerRect.bottom + TRIGGER_GAP;
     } else {
       direction = "top";
-      top = triggerRect.top - room;
+      top = triggerRect.top - TRIGGER_GAP - room;
     }
     maxHeight = room;
   }
@@ -193,22 +194,22 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.useEffect(() => {
-    if (!enabled) return;
-    const onScroll = (e) => {
-      const target = e.target;
-      if (target === document || target === document.documentElement || target === document.body) {
-        return;
-      }
-      if (target instanceof Node && popRef.current?.contains(target)) return;
-      onCloseRef.current();
-    };
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => window.removeEventListener("scroll", onScroll, true);
-  }, [enabled, popRef]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // src/tokens/svg/action/CopyIcon.tsx
@@ -1366,7 +1367,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = React6.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });