@bigtablet/design-system 3.17.3 → 3.18.1

package/dist/index.js

@@ -104,7 +104,7 @@ var over = (top, bottom) => [
   Math.round(top[2] * top[3] + bottom[2] * (1 - top[3])),
   1
 ];
-var compositeCanvasDim = (html, body) => {
+var measureCanvasColors = (html, body) => {
   const raw = window.getComputedStyle(html).getPropertyValue(DIM_VAR).trim() || DIM_FALLBACK;
   const dim = normalizeColor(raw);
   if (!dim || dim[3] <= 0) return null;
@@ -113,8 +113,7 @@ var compositeCanvasDim = (html, body) => {
     parseRgb(window.getComputedStyle(body).backgroundColor)
   ];
   const base = candidates.find((color) => color !== null && color[3] > 0) ?? WHITE;
-  const [r, g, b] = over(dim, over(base, WHITE));
-  return `rgb(${r}, ${g}, ${b})`;
+  return [dim, over(base, WHITE)];
 };
 var measureViewportInset = () => {
   const probe = document.createElement("div");
@@ -125,6 +124,33 @@ var measureViewportInset = () => {
   if (width <= 0) return 0;
   return Math.max(0, window.innerWidth - width);
 };
+var dimProgress = /* @__PURE__ */ new Map();
+var canvasBase = null;
+var canvasDim = null;
+var combinedDimAlpha = (alpha) => {
+  if (dimProgress.size === 0) return alpha;
+  let transmitted = 1;
+  for (const progress of dimProgress.values()) {
+    transmitted *= 1 - alpha * progress;
+  }
+  return 1 - transmitted;
+};
+var paintCanvas = (html) => {
+  if (!canvasBase || !canvasDim) return;
+  const alpha = combinedDimAlpha(canvasDim[3]);
+  const [r, g, b] = over([canvasDim[0], canvasDim[1], canvasDim[2], alpha], canvasBase);
+  html.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+};
+function reportOverlayDim(owner, progress) {
+  if (typeof document === "undefined") return;
+  dimProgress.set(owner, Math.min(1, Math.max(0, progress)));
+  paintCanvas(document.documentElement);
+}
+function unregisterOverlayDim(owner) {
+  if (typeof document === "undefined") return;
+  if (!dimProgress.delete(owner)) return;
+  paintCanvas(document.documentElement);
+}
 function lockBodyScroll() {
   if (typeof document === "undefined") return;
   const body = document.body;
@@ -152,9 +178,10 @@ function lockBodyScroll() {
       }
     }
     if (scrollbarWidth > 0 && canReserveGutter) {
-      const dimmed = compositeCanvasDim(html, body);
-      if (dimmed) {
-        html.style.backgroundColor = dimmed;
+      const measured = measureCanvasColors(html, body);
+      if (measured) {
+        [canvasDim, canvasBase] = measured;
+        paintCanvas(html);
       }
     }
     html.setAttribute(LOCKED_ATTR, "");
@@ -185,6 +212,9 @@ function unlockBodyScroll() {
     delete body.dataset[PREV_PADDING_RIGHT];
     delete body.dataset[PREV_SCROLLBAR_WIDTH_VAR];
     delete body.dataset[PREV_BACKGROUND_COLOR];
+    dimProgress.clear();
+    canvasBase = null;
+    canvasDim = null;
   } else {
     body.dataset[COUNTER] = String(remaining);
   }
@@ -250,15 +280,16 @@ function computeAnchoredPosition(anchor, floating, viewport, options) {
   if (!fitsMainAxis(side, anchor, sized, viewport, gap, padding) && fitsMainAxis(OPPOSITE[side], anchor, sized, viewport, gap, padding)) {
     side = OPPOSITE[side];
   }
+  const align = options.align ?? "center";
   let x;
   let y;
   if (isVertical(side)) {
     y = mainAxisStart(side, anchor, sized, gap);
-    x = anchor.left + anchor.width / 2 - sized.width / 2;
+    x = align === "start" ? anchor.left : align === "end" ? anchor.left + anchor.width - sized.width : anchor.left + anchor.width / 2 - sized.width / 2;
     x = clamp(x, padding, viewport.width - padding - sized.width);
   } else {
     x = mainAxisStart(side, anchor, sized, gap);
-    y = anchor.top + anchor.height / 2 - sized.height / 2;
+    y = align === "start" ? anchor.top : align === "end" ? anchor.top + anchor.height - sized.height : anchor.top + anchor.height / 2 - sized.height / 2;
     y = clamp(y, padding, viewport.height - padding - sized.height);
   }
   return { x, y, placement: side, maxWidth };
@@ -268,6 +299,7 @@ function useAnchoredPosition({
   anchorRef,
   floatingRef,
   placement,
+  align,
   gap,
   padding
 }) {
@@ -276,7 +308,8 @@ function useAnchoredPosition({
     y: 0,
     placement,
     maxWidth: 0,
-    ready: false
+    ready: false,
+    anchorWidth: 0
   });
   useSafeLayoutEffect(() => {
     if (!open) {
@@ -293,9 +326,13 @@ function useAnchoredPosition({
         { top: a.top, left: a.left, width: a.width, height: a.height },
         { width: f.width, height: f.height },
         { width: window.innerWidth, height: window.innerHeight },
-        { placement, gap, padding }
+        { placement, align, gap, padding }
       );
-      setState({ ...result, ready: true });
+      setState({
+        ...result,
+        ready: true,
+        anchorWidth: Math.min(a.width, result.maxWidth)
+      });
     };
     let frame = 0;
     const schedule = () => {
@@ -317,7 +354,7 @@ function useAnchoredPosition({
       window.removeEventListener("resize", schedule);
       observer?.disconnect();
     };
-  }, [open, placement, gap, padding, anchorRef, floatingRef]);
+  }, [open, placement, align, gap, padding, anchorRef, floatingRef]);
   return state;
 }
 var SKIP_AUTOFOCUS_ATTR = "data-focus-trap-skip-autofocus";
@@ -426,7 +463,8 @@ function useSpringHover({
   const reduced = useReducedMotion();
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
-    // reduced-motion: lift/scale 모션 제거 (WCAG 2.3.3)
+    // reduced-motion: 보간을 없애 움직임을 지운다. 최종 상태(lift/scale)는 남는다 - 강조가
+    // 사라지면 hover/focus 를 알 수 없다. WCAG 2.3.3 이 막는 것은 모션이다.
     immediate: reduced,
     config: { tension: 320, friction: 22 }
   });
@@ -441,7 +479,8 @@ function useSpringHover({
 function useSpringPresence({
   visible,
   from = "translateY(8px)",
-  onExitComplete
+  onExitComplete,
+  onProgress
 }) {
   const reduced = useReducedMotion();
   return useSpring({
@@ -462,6 +501,7 @@ function useSpringPresence({
       clamp: !visible
       // 사라질 땐 진동 없이 빠르게
     },
+    onChange: (result) => onProgress?.(Number(result.value.opacity)),
     onRest: (result) => {
       if (!visible && result.finished && onExitComplete) {
         onExitComplete();
@@ -469,7 +509,8 @@ function useSpringPresence({
     }
   });
 }
-var MIN_SPACE_BELOW = 120;
+var LIST_GAP = 4;
+var LIST_PADDING = 8;
 function useListboxPopup({
   items,
   onCommit,
@@ -479,17 +520,19 @@ function useListboxPopup({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
-  const [dropUp, setDropUp] = useState(false);
   const wrapperRef = useRef(null);
   const triggerRef = useRef(null);
   const listRef = useRef(null);
+  const panelRef = useRef(null);
   const close = useCallback(() => {
     setIsOpen(false);
     if (returnFocusOnClose) triggerRef.current?.focus();
   }, [returnFocusOnClose]);
   useEffect(() => {
     const handleOutsideClick = (event) => {
-      if (!wrapperRef.current?.contains(event.target)) setIsOpen(false);
+      const target = event.target;
+      if (wrapperRef.current?.contains(target) || panelRef.current?.contains(target)) return;
+      setIsOpen(false);
     };
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
@@ -608,22 +651,33 @@ function useListboxPopup({
     const option = list.querySelectorAll('[role="option"]')[activeIndex];
     option?.scrollIntoView?.({ block: "nearest" });
   }, [isOpen, activeIndex, items]);
-  useEffect(() => {
-    if (!isOpen || !triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    setDropUp(spaceBelow < MIN_SPACE_BELOW && spaceAbove > spaceBelow);
-  }, [isOpen]);
+  const anchored = useAnchoredPosition({
+    open: isOpen,
+    anchorRef: wrapperRef,
+    floatingRef: panelRef,
+    placement: "bottom",
+    // 트리거 왼쪽 변에 맞춘다 - 목록이 컨트롤의 연장으로 읽혀야 한다.
+    align: "start",
+    gap: LIST_GAP,
+    padding: LIST_PADDING
+  });
   return {
     isOpen,
     setIsOpen,
-    dropUp,
+    dropUp: anchored.placement === "top",
+    position: {
+      x: anchored.x,
+      y: anchored.y,
+      width: anchored.anchorWidth,
+      maxWidth: anchored.maxWidth,
+      ready: anchored.ready
+    },
     activeIndex,
     setActiveIndex,
     wrapperRef,
     triggerRef,
     listRef,
+    panelRef,
     close,
     moveActive,
     commitActive,
@@ -1171,25 +1225,46 @@ var Breadcrumb = ({
   const sep = separator ?? /* @__PURE__ */ jsx(ChevronRight, { size: iconSize.xs, "aria-hidden": "true" });
   return /* @__PURE__ */ jsx("nav", { "aria-label": navLabel, className: cn("breadcrumb", className), ...props, children: /* @__PURE__ */ jsx("ol", { className: "breadcrumb_list", children: items.map((item, idx) => {
     const isLast = idx === items.length - 1;
+    const Tag = item.as ?? "a";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items have stable order
       /* @__PURE__ */ jsxs("li", { className: "breadcrumb_item", children: [
-        isLast ? /* @__PURE__ */ jsx("span", { className: "breadcrumb_current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx("a", { className: "breadcrumb_link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("button", { type: "button", className: "breadcrumb_link", onClick: item.onClick, children: item.label }),
+        isLast ? /* @__PURE__ */ jsx("span", { className: "breadcrumb_current", "aria-current": "page", children: item.label }) : item.href ? (
+          // `href`·`className`·`onClick` 을 그대로 넘긴다 - 라우터 `Link` 가 수정자
+          // 클릭·프리페치를 자기 방식대로 처리한다.
+          /* @__PURE__ */ jsx(Tag, { className: "breadcrumb_link", href: item.href, onClick: item.onClick, children: item.label })
+        ) : /* @__PURE__ */ jsx("button", { type: "button", className: "breadcrumb_link", onClick: item.onClick, children: item.label }),
         !isLast && /* @__PURE__ */ jsx("span", { className: "breadcrumb_separator", "aria-hidden": "true", children: sep })
       ] }, idx)
     );
   }) }) });
 };
+var MENU_GAP = 4;
 var Menu = ({ items, trigger, align = "start" }) => {
   const [open, setOpen] = React11.useState(false);
   const wrapperRef = React11.useRef(null);
+  const menuRef = React11.useRef(null);
   const itemRefs = React11.useRef([]);
   const menuId = React11.useId();
-  const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
+  const pos = useAnchoredPosition({
+    open,
+    anchorRef: wrapperRef,
+    floatingRef: menuRef,
+    placement: "bottom",
+    align,
+    gap: MENU_GAP,
+    padding: 8
+  });
+  const style = useSpringPresence({
+    visible: open,
+    from: pos.placement === "top" ? `translateY(${MENU_GAP}px)` : `translateY(-${MENU_GAP}px)`
+  });
   React11.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
-      if (!wrapperRef.current?.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (wrapperRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      setOpen(false);
     };
     const handleEsc = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -1212,8 +1287,8 @@ var Menu = ({ items, trigger, align = "start" }) => {
     if (enabled.length === 0) return;
     if (dir === "first") return void itemRefs.current[enabled[0]]?.focus();
     if (dir === "last") return void itemRefs.current[enabled[enabled.length - 1]]?.focus();
-    const pos = enabled.findIndex((i) => itemRefs.current[i] === document.activeElement);
-    const next = pos < 0 ? dir === 1 ? 0 : enabled.length - 1 : (pos + dir + enabled.length) % enabled.length;
+    const pos2 = enabled.findIndex((i) => itemRefs.current[i] === document.activeElement);
+    const next = pos2 < 0 ? dir === 1 ? 0 : enabled.length - 1 : (pos2 + dir + enabled.length) % enabled.length;
     itemRefs.current[enabled[next]]?.focus();
   };
   const handleMenuKeyDown = (e) => {
@@ -1243,6 +1318,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
         wrapperRef.current?.querySelector("[aria-haspopup]")?.focus();
         break;
       case "Tab":
+        wrapperRef.current?.querySelector("[aria-haspopup]")?.focus();
         setOpen(false);
         break;
     }
@@ -1258,42 +1334,52 @@ var Menu = ({ items, trigger, align = "start" }) => {
   );
   return /* @__PURE__ */ jsxs("span", { className: "menu_wrapper", ref: wrapperRef, children: [
     triggerWithProps,
-    open && /* @__PURE__ */ jsx(
-      animated.div,
-      {
-        id: menuId,
-        role: "menu",
-        style,
-        className: cn("menu", `menu_align_${align}`),
-        onKeyDown: handleMenuKeyDown,
-        children: items.map((item, index) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: (el) => {
-              itemRefs.current[index] = el;
-            },
-            type: "button",
-            role: "menuitem",
-            tabIndex: -1,
-            disabled: item.disabled,
-            className: cn(
-              "menu_item",
-              item.destructive && "menu_item_destructive",
-              item.disabled && "menu_item_disabled"
-            ),
-            onClick: () => {
-              if (item.disabled) return;
-              item.onSelect?.();
-              setOpen(false);
-            },
-            children: [
-              item.icon && /* @__PURE__ */ jsx("span", { className: "menu_item_icon", "aria-hidden": "true", children: item.icon }),
-              /* @__PURE__ */ jsx("span", { className: "menu_item_label", children: item.label })
-            ]
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        animated.div,
+        {
+          id: menuId,
+          ref: menuRef,
+          role: "menu",
+          style: {
+            ...style,
+            position: "fixed",
+            left: pos.x,
+            top: pos.y,
+            visibility: pos.ready ? void 0 : "hidden"
           },
-          item.key
-        ))
-      }
+          className: cn("menu", `menu_align_${align}`),
+          onKeyDown: handleMenuKeyDown,
+          children: items.map((item, index) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              disabled: item.disabled,
+              className: cn(
+                "menu_item",
+                item.destructive && "menu_item_destructive",
+                item.disabled && "menu_item_disabled"
+              ),
+              onClick: () => {
+                if (item.disabled) return;
+                item.onSelect?.();
+                setOpen(false);
+              },
+              children: [
+                item.icon && /* @__PURE__ */ jsx("span", { className: "menu_item_icon", "aria-hidden": "true", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { className: "menu_item_label", children: item.label })
+              ]
+            },
+            item.key
+          ))
+        }
+      ),
+      document.body
     )
   ] });
 };
@@ -1489,13 +1575,16 @@ var LocaleSwitcher = ({ locale }) => {
     ) }, opt.value)) })
   ] });
 };
-var NavLink = ({ active, className, children, ...props }) => {
+var NavLink = (props) => {
+  const { active, className, children, as, ref, ...rest } = props;
+  const Tag = as ?? "a";
   return /* @__PURE__ */ jsx(
-    "a",
+    Tag,
     {
-      className: cn("nav_bar_link", active && "nav_bar_link_active"),
+      ref,
+      className: cn("nav_bar_link", active && "nav_bar_link_active", className),
       "aria-current": active ? "page" : void 0,
-      ...props,
+      ...rest,
       children
     }
   );
@@ -3754,11 +3843,13 @@ var AlertModal = ({
   useOverlayEscape(isOpen, () => dismiss());
   if (isOpen && !shouldRender) setShouldRender(true);
   const reduced = useReducedMotion();
+  const dimOwner = React11.useRef({}).current;
   const overlayStyle = useSpring({
     ...springEnterFrom(reduced),
     to: { opacity: isOpen ? 1 : 0 },
     immediate: reduced,
     config: OVERLAY_SPRING_CONFIG,
+    onChange: (result) => reportOverlayDim(dimOwner, Number(result.value.opacity)),
     onRest: (result) => {
       if (!isOpen && result.finished) setShouldRender(false);
     }
@@ -3774,8 +3865,12 @@ var AlertModal = ({
   });
   React11.useEffect(() => {
     if (!shouldRender) return;
+    reportOverlayDim(dimOwner, reduced ? 1 : 0);
     lockBodyScroll();
-    return unlockBodyScroll;
+    return () => {
+      unlockBodyScroll();
+      unregisterOverlayDim(dimOwner);
+    };
   }, [shouldRender]);
   if (!isOpen && !shouldRender) return null;
   const confirmVariant = "filled";
@@ -4185,42 +4280,59 @@ var Combobox = ({
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ jsx(
-      animated.div,
-      {
-        className: cn("combobox_panel", { combobox_panel_up: popup.dropUp }),
-        style: panelStyle,
-        children: !hasList ? /* @__PURE__ */ jsx("p", { className: "combobox_message", role: "status", children: showIdle ? idleMessage : emptyMessage }) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: popup.listRef,
-            id: listId,
-            className: "combobox_list",
-            role: "listbox",
-            children: options.map((option, index) => (
-              /* biome-ignore lint/a11y/useKeyWithClickEvents: 키보드는 입력의 onKeyDown 이 담당한다 - option 은 aria-activedescendant 로 가리키는 비포커스 요소다 (APG Combobox) */
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  id: `${listId}-${option.value}`,
-                  role: "option",
-                  tabIndex: -1,
-                  "aria-selected": value?.value === option.value,
-                  "aria-disabled": option.disabled || void 0,
-                  className: cn("combobox_option", {
-                    is_active: index === activeIndex,
-                    is_disabled: option.disabled
-                  }),
-                  onMouseEnter: () => !option.disabled && setActiveIndex(index),
-                  onClick: () => !option.disabled && commit(option),
-                  children: renderOption ? renderOption(option) : option.label
-                },
-                option.value
-              )
-            ))
-          }
-        )
-      }
+    isOpen && typeof document !== "undefined" && createPortal(
+      // Dropdown 과 같은 이유로 포탈이다 - 트리거 옆에 두면 `overflow: hidden` 조상이
+      // 잘라낸다(#586). 좌표·폭은 배치 훅이 트리거를 재서 준다.
+      /* @__PURE__ */ jsx(
+        animated.div,
+        {
+          ref: popup.panelRef,
+          className: cn("combobox_panel", { combobox_panel_up: popup.dropUp }),
+          style: {
+            ...panelStyle,
+            position: "fixed",
+            left: popup.position.x,
+            top: popup.position.y,
+            // 트리거 폭은 하한 - 못박으면 좁은 트리거에서 옵션 라벨이 잘린다(#596).
+            // 실제 폭은 `width: max-content`(style.scss)가 내용 기준으로 정한다.
+            minWidth: popup.position.width || void 0,
+            // 트리거가 뷰포트보다 넓으면 좌표만 줄어들고 패널은 그대로 넘친다.
+            maxWidth: popup.position.ready ? popup.position.maxWidth : void 0,
+            visibility: popup.position.ready ? void 0 : "hidden"
+          },
+          children: !hasList ? /* @__PURE__ */ jsx("p", { className: "combobox_message", role: "status", children: showIdle ? idleMessage : emptyMessage }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: popup.listRef,
+              id: listId,
+              className: "combobox_list",
+              role: "listbox",
+              children: options.map((option, index) => (
+                /* biome-ignore lint/a11y/useKeyWithClickEvents: 키보드는 입력의 onKeyDown 이 담당한다 - option 은 aria-activedescendant 로 가리키는 비포커스 요소다 (APG Combobox) */
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: `${listId}-${option.value}`,
+                    role: "option",
+                    tabIndex: -1,
+                    "aria-selected": value?.value === option.value,
+                    "aria-disabled": option.disabled || void 0,
+                    className: cn("combobox_option", {
+                      is_active: index === activeIndex,
+                      is_disabled: option.disabled
+                    }),
+                    onMouseEnter: () => !option.disabled && setActiveIndex(index),
+                    onClick: () => !option.disabled && commit(option),
+                    children: renderOption ? renderOption(option) : option.label
+                  },
+                  option.value
+                )
+              ))
+            }
+          )
+        }
+      ),
+      document.body
     )
   ] });
 };
@@ -4320,6 +4432,8 @@ var Dropdown = (props) => {
     wrapperRef,
     triggerRef: controlRef,
     listRef,
+    panelRef,
+    position,
     close: closePanel,
     onTriggerKeyDown: onControlKeyDown,
     onInputKeyDown: onSearchKeyDown
@@ -4387,86 +4501,113 @@ var Dropdown = (props) => {
       }
     ) }),
     name && (multiple ? selectedValues.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v, disabled }, v)) : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValues[0] ?? "", disabled })),
-    isOpen && /* @__PURE__ */ jsxs(animated.div, { className: listClassName, style: listStyle, children: [
-      searchable && /* @__PURE__ */ jsxs("div", { className: "dropdown_search", children: [
-        /* @__PURE__ */ jsx("span", { className: "dropdown_search_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Search, { size: iconSize.sm }) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: searchRef,
-            type: "text",
-            className: "dropdown_search_input",
-            placeholder: searchPlaceholder,
-            "aria-label": searchPlaceholder,
-            autoComplete: "off",
-            role: "combobox",
-            "aria-autocomplete": "list",
-            "aria-expanded": isOpen,
-            "aria-controls": `${dropdownId}_listbox`,
-            "aria-activedescendant": activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
-            value: searchText,
-            onChange: (e) => {
-              const v = e.target.value;
-              setSearchText(v);
-              if (!isComposingRef.current) setCommittedQuery(v);
-            },
-            onCompositionStart: () => {
-              isComposingRef.current = true;
-            },
-            onCompositionEnd: (e) => {
-              isComposingRef.current = false;
-              const v = e.currentTarget.value;
-              setSearchText(v);
-              setCommittedQuery(v);
-            },
-            onKeyDown: onSearchKeyDown
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
+    isOpen && typeof document !== "undefined" && createPortal(
+      // 포탈로 body 에 띄운다. 트리거 옆에 두면 `overflow: hidden` 인 조상(카드·표
+      // 래퍼)이 목록을 잘라내고 `z-index` 로는 넘지 못한다(#586 - 170px 중 46px 만
+      // 보였다). 좌표·폭은 훅이 트리거를 재서 준다.
+      /* @__PURE__ */ jsxs(
+        animated.div,
         {
-          ref: listRef,
-          id: `${dropdownId}_listbox`,
-          role: "listbox",
-          className: "dropdown_options",
-          "aria-multiselectable": multiple || void 0,
-          children: visibleOptions.length === 0 ? searchable && /* @__PURE__ */ jsx("div", { className: "dropdown_empty", children: emptyText }) : visibleOptions.map((opt, i) => {
-            const selected = selectedValues.includes(opt.value);
-            const active = i === activeIndex;
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "div",
+          ref: panelRef,
+          className: listClassName,
+          style: {
+            ...listStyle,
+            position: "fixed",
+            left: position.x,
+            top: position.y,
+            // 트리거 폭은 **하한**이다 - 못박으면 트리거가 좁을 때 목록이 자기 옵션
+            // 라벨을 ellipsis 로 접는다(#596 - 48px 트리거에서 `02` 가 `0.`). 실제 폭은
+            // `width: max-content`(style.scss)가 내용 기준으로 정하고 maxWidth 가 막는다.
+            minWidth: position.width || void 0,
+            // 트리거가 뷰포트보다 넓으면 좌표만 줄어들고 패널은 그대로 넘친다.
+            maxWidth: position.ready ? position.maxWidth : void 0,
+            // 최초 측정 전에는 숨긴다 - (0,0) 에서 한 프레임 깜빡이는 것을 막는다.
+            visibility: position.ready ? void 0 : "hidden"
+          },
+          children: [
+            searchable && /* @__PURE__ */ jsxs("div", { className: "dropdown_search", children: [
+              /* @__PURE__ */ jsx("span", { className: "dropdown_search_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Search, { size: iconSize.sm }) }),
+              /* @__PURE__ */ jsx(
+                "input",
                 {
-                  id: `${dropdownId}_option_${i}`,
-                  role: "option",
-                  tabIndex: -1,
-                  "aria-selected": selected,
-                  "aria-disabled": opt.disabled ? true : void 0,
-                  className: cn("dropdown_option", {
-                    is_selected: selected,
-                    is_active: active,
-                    is_disabled: opt.disabled
-                  }),
-                  onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-                  onClick: () => selectOption(opt),
-                  children: [
-                    multiple && /* @__PURE__ */ jsx("span", { className: "dropdown_option_check", "aria-hidden": "true", children: selected && /* @__PURE__ */ jsx(Check, { size: iconSize.sm }) }),
-                    opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
-                    /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
-                      /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
-                      opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
-                    ] }),
-                    (opt.trailingIcon || !multiple && selected) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: iconSize.sm, "aria-hidden": "true" }) })
-                  ]
+                  ref: searchRef,
+                  type: "text",
+                  className: "dropdown_search_input",
+                  placeholder: searchPlaceholder,
+                  "aria-label": searchPlaceholder,
+                  autoComplete: "off",
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": isOpen,
+                  "aria-controls": `${dropdownId}_listbox`,
+                  "aria-activedescendant": activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
+                  value: searchText,
+                  onChange: (e) => {
+                    const v = e.target.value;
+                    setSearchText(v);
+                    if (!isComposingRef.current) setCommittedQuery(v);
+                  },
+                  onCompositionStart: () => {
+                    isComposingRef.current = true;
+                  },
+                  onCompositionEnd: (e) => {
+                    isComposingRef.current = false;
+                    const v = e.currentTarget.value;
+                    setSearchText(v);
+                    setCommittedQuery(v);
+                  },
+                  onKeyDown: onSearchKeyDown
                 }
-              ),
-              opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
-            ] }, opt.value);
-          })
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: listRef,
+                id: `${dropdownId}_listbox`,
+                role: "listbox",
+                className: "dropdown_options",
+                "aria-multiselectable": multiple || void 0,
+                children: visibleOptions.length === 0 ? searchable && /* @__PURE__ */ jsx("div", { className: "dropdown_empty", children: emptyText }) : visibleOptions.map((opt, i) => {
+                  const selected = selectedValues.includes(opt.value);
+                  const active = i === activeIndex;
+                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        id: `${dropdownId}_option_${i}`,
+                        role: "option",
+                        tabIndex: -1,
+                        "aria-selected": selected,
+                        "aria-disabled": opt.disabled ? true : void 0,
+                        className: cn("dropdown_option", {
+                          is_selected: selected,
+                          is_active: active,
+                          is_disabled: opt.disabled
+                        }),
+                        onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                        onClick: () => selectOption(opt),
+                        children: [
+                          multiple && /* @__PURE__ */ jsx("span", { className: "dropdown_option_check", "aria-hidden": "true", children: selected && /* @__PURE__ */ jsx(Check, { size: iconSize.sm }) }),
+                          opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
+                          /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
+                            /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
+                            opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
+                          ] }),
+                          (opt.trailingIcon || !multiple && selected) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: iconSize.sm, "aria-hidden": "true" }) })
+                        ]
+                      }
+                    ),
+                    opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
+                  ] }, opt.value);
+                })
+              }
+            )
+          ]
         }
-      )
-    ] })
+      ),
+      document.body
+    )
   ] });
 };
 var pad = (n) => String(n).padStart(2, "0");
@@ -5966,9 +6107,11 @@ var Drawer = ({
     if (escapeDismissible) onClose?.();
   });
   if (open && !shouldRender) setShouldRender(true);
+  const dimOwner = React11.useRef({}).current;
   const overlayStyle = useSpringPresence({
     visible: open,
     from: "translateY(0px)",
+    onProgress: (progress) => reportOverlayDim(dimOwner, progress),
     onExitComplete: () => {
       setShouldRender(false);
       onExited?.();
@@ -5984,8 +6127,12 @@ var Drawer = ({
   });
   React11.useEffect(() => {
     if (!shouldRender) return;
+    reportOverlayDim(dimOwner, reduced ? 1 : 0);
     lockBodyScroll();
-    return unlockBodyScroll;
+    return () => {
+      unlockBodyScroll();
+      unregisterOverlayDim(dimOwner);
+    };
   }, [shouldRender]);
   if (!open && !shouldRender) return null;
   if (typeof document === "undefined" || !isMounted) return null;
@@ -6074,11 +6221,13 @@ var Modal = ({
   });
   if (open && !shouldRender) setShouldRender(true);
   const reduced = useReducedMotion();
+  const dimOwner = React11.useRef({}).current;
   const overlayStyle = useSpring({
     ...springEnterFrom(reduced),
     to: { opacity: open ? 1 : 0 },
     immediate: reduced,
     config: OVERLAY_SPRING_CONFIG,
+    onChange: (result) => reportOverlayDim(dimOwner, Number(result.value.opacity)),
     onRest: (result) => {
       if (open || !result.finished) return;
       setShouldRender(false);
@@ -6096,8 +6245,12 @@ var Modal = ({
   });
   React11.useEffect(() => {
     if (!shouldRender) return;
+    reportOverlayDim(dimOwner, reduced ? 1 : 0);
     lockBodyScroll();
-    return unlockBodyScroll;
+    return () => {
+      unlockBodyScroll();
+      unregisterOverlayDim(dimOwner);
+    };
   }, [shouldRender]);
   if (!open && !shouldRender) return null;
   if (typeof document === "undefined" || !isMounted) return null;