@simplysm/solid 13.0.69 → 13.0.71

package/src/components/disclosure/Dropdown.tsx

@@ -18,6 +18,7 @@ import { twMerge } from "tailwind-merge";
 import { mergeStyles } from "../../helpers/mergeStyles";
 import { createSlotComponent } from "../../helpers/createSlotComponent";
 import { borderSubtle } from "../../styles/tokens.styles";
+import { tabbable } from "tabbable";
 
 // --- DropdownContext (internal) ---
 
@@ -41,53 +42,55 @@ const DropdownContent = createSlotComponent(DropdownContext, (ctx) => ctx.setCon
 
 export interface DropdownProps {
   /**
-   * 절대 위치 (컨텍스트 메뉴 등, minWidth 없음)
-   * Trigger와 함께 사용 시 Trigger 기준 위치 계산
+   * Absolute position (for context menus, no minWidth)
+   * When used with Trigger, calculates position relative to Trigger
    */
   position?: { x: number; y: number };
 
   /**
-   * 팝업 열림 상태
+   * Popup open state
    */
   open?: boolean;
 
   /**
-   * 열림 상태 변경 시 콜백
+   * Callback when open state changes
    */
   onOpenChange?: (open: boolean) => void;
 
   /**
-   * 팝업 최대 높이 (기본값: 300px), 초과 시 내부 스크롤
+   * Popup max height (default: 300px), scrolls internally if exceeded
    */
   maxHeight?: number;
 
   /**
-   * 비활성화 (Trigger 클릭 무시)
+   * Disabled (Trigger click ignored)
    */
   disabled?: boolean;
 
   /**
-   * 키보드 네비게이션 활성화 (Select 등에서 사용)
+   * Enable keyboard navigation (used in Select, etc)
    *
-   * direction=down일 때:
-   * - 트리거에서 ArrowDown -> 첫 focusable 아이템 포커스
-   * - 첫 아이템에서 ArrowUp -> 트리거 포커스
-   * - 트리거에서 ArrowUp -> 닫기
+   * When direction=down:
+   * - ArrowDown from trigger -> focus first tabbable item in popup
+   * - ArrowUp/ArrowDown within popup -> navigate between tabbable items
+   * - ArrowUp from first tabbable -> focus trigger
+   * - ArrowUp from trigger -> close
    *
-   * direction=up일 때:
-   * - 트리거에서 ArrowUp -> 마지막 focusable 아이템 포커스
-   * - 마지막 아이템에서 ArrowDown -> 트리거 포커스
-   * - 트리거에서 ArrowDown -> 닫기
+   * When direction=up:
+   * - ArrowUp from trigger -> focus last tabbable item in popup
+   * - ArrowUp/ArrowDown within popup -> navigate between tabbable items
+   * - ArrowDown from last tabbable -> focus trigger
+   * - ArrowDown from trigger -> close
    */
   keyboardNav?: boolean;
 
   /**
-   * 팝업에 적용할 커스텀 class
+   * Custom class for popup
    */
   class?: string;
 
   /**
-   * 팝업에 적용할 커스텀 style
+   * Custom style for popup
    */
   style?: JSX.CSSProperties;
 
@@ -103,28 +106,28 @@ interface DropdownComponent extends ParentComponent<DropdownProps> {
 }
 
 /**
- * 드롭다운 팝업 컴포넌트
+ * Dropdown popup component
  *
- * Trigger/Content 슬롯 패턴으로 트리거와 컨텐츠를 분리합니다.
- * Trigger 클릭 시 auto-toggle되며, disabled prop으로 비활성화할 수 있습니다.
+ * Separates trigger and content using Trigger/Content slot pattern.
+ * Auto-toggles on Trigger click, can be disabled with disabled prop.
  *
  * @example
  * ```tsx
  * <Dropdown>
  *   <Dropdown.Trigger>
- *     <Button>열기</Button>
+ *     <Button>Open</Button>
  *   </Dropdown.Trigger>
  *   <Dropdown.Content>
- *     <div>팝업 내용</div>
+ *     <div>Popup content</div>
  *   </Dropdown.Content>
  * </Dropdown>
  * ```
  *
- * @example Context menu (Trigger 없이 position 사용)
+ * @example Context menu (position without Trigger)
  * ```tsx
  * <Dropdown position={{ x: 300, y: 200 }} open={true}>
  *   <Dropdown.Content>
- *     <div>메뉴</div>
+ *     <div>Menu</div>
  *   </Dropdown.Content>
  * </Dropdown>
  * ```
@@ -147,32 +150,32 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onChange: () => local.onOpenChange,
   });
 
-  // toggle 함수 (disabled 체크 포함)
+  // Toggle function (includes disabled check)
   const toggle = () => {
     if (local.disabled) return;
     setOpen(!open());
   };
 
-  // 슬롯 등록 시그널
+  // Slot registration signals
   const [triggerSlot, setTrigger] = createSlotSignal();
   const [contentSlot, setContent] = createSlotSignal();
 
-  // Trigger wrapper ref (위치 계산에 필요)
+  // Trigger wrapper ref (needed for position calculation)
   let triggerRef: HTMLDivElement | undefined;
 
-  // 팝업 ref
+  // Popup ref
   const [popupRef, setPopupRef] = createSignal<HTMLDivElement>();
 
-  // 애니메이션 상태 (mount transition)
+  // Animation state (mount transition)
   const { mounted, animating, unmount } = createMountTransition(open);
 
-  // 계산된 위치
+  // Computed position
   const [computedStyle, setComputedStyle] = createSignal<JSX.CSSProperties>({});
 
-  // 방향 (위/아래)
+  // Direction (up/down)
   const [direction, setDirection] = createSignal<"down" | "up">("down");
 
-  // 위치 계산 함수 추출
+  // Extract position calculation function
   const updatePosition = () => {
     const popup = popupRef();
     if (!popup) return;
@@ -184,13 +187,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
 
-      // 위/아래 방향 결정 (화면 중앙 기준)
+      // Determine up/down direction (based on viewport center)
       const spaceBelow = viewportHeight - rect.bottom;
       const spaceAbove = rect.top;
       const openDown = spaceBelow >= spaceAbove;
       setDirection(openDown ? "down" : "up");
 
-      // 좌/우 조정 (화면 밖으로 나가지 않도록) - 뷰포트 기준
+      // Adjust left/right (prevent off-screen) - relative to viewport
       const adjustedLeft = Math.min(rect.left, viewportWidth - popup.offsetWidth);
 
       style.left = `${Math.max(0, adjustedLeft)}px`;
@@ -205,13 +208,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const viewportHeight = window.innerHeight;
       const viewportWidth = window.innerWidth;
 
-      // 위/아래 방향 결정
+      // Determine up/down direction
       const spaceBelow = viewportHeight - local.position.y;
       const spaceAbove = local.position.y;
       const openDown = spaceBelow >= spaceAbove;
       setDirection(openDown ? "down" : "up");
 
-      // 좌/우 조정 - 뷰포트 기준
+      // Adjust left/right - relative to viewport
       const adjustedLeft = Math.min(local.position.x, viewportWidth - (popup.offsetWidth || 200));
       style.left = `${Math.max(0, adjustedLeft)}px`;
 
@@ -225,7 +228,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     setComputedStyle(style);
   };
 
-  // 마운트 시 위치 계산 + popup 크기 변경 시 재계산
+  // Calculate position on mount + recalculate when popup size changes
   createEffect(() => {
     if (!mounted()) return;
 
@@ -239,7 +242,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     }
   });
 
-  // 외부 클릭 감지 (pointerdown)
+  // Detect outside click (pointerdown)
   createEffect(() => {
     if (!open()) return;
 
@@ -247,13 +250,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const popup = popupRef();
       const target = e.target as Node;
 
-      // 팝업 내부 클릭은 무시
+      // Ignore clicks inside popup
       if (popup?.contains(target)) return;
 
-      // Trigger 내부 클릭도 무시
+      // Ignore clicks inside trigger
       if (triggerRef?.contains(target)) return;
 
-      // 외부 클릭 -> 닫기
+      // Outside click -> close
       setOpen(false);
     };
 
@@ -261,7 +264,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => document.removeEventListener("pointerdown", handlePointerDown));
   });
 
-  // Tab 키 포커스 이동 감지 (focusout)
+  // Detect Tab key focus movement (focusout)
   createEffect(() => {
     if (!open()) return;
 
@@ -269,16 +272,16 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       const popup = popupRef();
       const relatedTarget = e.relatedTarget as Node | null;
 
-      // relatedTarget이 null이면 무시 (pointerdown이 처리)
+      // Ignore if relatedTarget is null (pointerdown handles it)
       if (!relatedTarget) return;
 
-      // 팝업 내부로 이동은 무시
+      // Ignore movement to popup
       if (popup?.contains(relatedTarget)) return;
 
-      // Trigger 내부로 이동도 무시
+      // Ignore movement to trigger
       if (triggerRef?.contains(relatedTarget)) return;
 
-      // 외부로 포커스 이동 -> 닫기
+      // Focus moved outside -> close
       setOpen(false);
     };
 
@@ -286,7 +289,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => document.removeEventListener("focusout", handleFocusOut));
   });
 
-  // Escape 키 감지
+  // Detect Escape key
   createEffect(() => {
     if (!open()) return;
 
@@ -301,11 +304,11 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
   });
 
-  // 키보드 네비게이션: 트리거용 핸들러
+  // Keyboard navigation: handler for trigger
   const handleTriggerKeyDown = (e: KeyboardEvent) => {
     if (!local.keyboardNav) return;
 
-    // 닫혀있을 때: ArrowUp/ArrowDown으로 열기
+    // When closed: open with ArrowUp/ArrowDown
     if (!open()) {
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
@@ -314,16 +317,12 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
       return;
     }
 
-    // 열려있을 때: direction에 따른 처리
+    // When open: handle based on direction
     const popup = popupRef();
     if (!popup) return;
 
     const dir = direction();
-    const focusables = [
-      ...popup.querySelectorAll<HTMLElement>(
-        '[tabindex]:not([tabindex="-1"]), button, [data-list-item]',
-      ),
-    ];
+    const focusables = tabbable(popup);
 
     if (dir === "down") {
       if (e.key === "ArrowDown" && focusables.length > 0) {
@@ -345,46 +344,60 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     }
   };
 
-  // 키보드 네비게이션: 팝업용 핸들러
+  // Keyboard navigation: handler for popup
   const handlePopupKeyDown = (e: KeyboardEvent) => {
     if (!local.keyboardNav) return;
 
-    // List 등에서 이미 처리된 이벤트는 무시
+    // Ignore events already handled (e.g., by List)
     if (e.defaultPrevented) return;
 
     if (!triggerRef) return;
 
+    const popup = popupRef();
+    if (!popup) return;
+
     const dir = direction();
+    const allTabbable = tabbable(popup);
+    const current = (document.activeElement ?? e.target) as HTMLElement;
+    const currentIdx = allTabbable.indexOf(current);
 
-    // 팝업에서 ArrowUp/ArrowDown이 처리되지 않았다면 (첫/마지막 아이템)
-    // 트리거로 포커스 이동
-    if (dir === "down" && e.key === "ArrowUp") {
-      e.preventDefault();
-      triggerRef.focus();
-    } else if (dir === "up" && e.key === "ArrowDown") {
-      e.preventDefault();
-      triggerRef.focus();
+    if (e.key === "ArrowUp") {
+      if (currentIdx > 0) {
+        e.preventDefault();
+        allTabbable[currentIdx - 1].focus();
+      } else if (dir === "down") {
+        e.preventDefault();
+        triggerRef.focus();
+      }
+    } else if (e.key === "ArrowDown") {
+      if (currentIdx >= 0 && currentIdx < allTabbable.length - 1) {
+        e.preventDefault();
+        allTabbable[currentIdx + 1].focus();
+      } else if (dir === "up") {
+        e.preventDefault();
+        triggerRef.focus();
+      }
     }
   };
 
-  // 스크롤 감지
+  // Detect scroll
   createEffect(() => {
     if (!open()) return;
 
     const handleScroll = (e: Event) => {
-      // 팝업 내부 스크롤은 무시
+      // Ignore scroll inside popup
       const popup = popupRef();
       if (popup?.contains(e.target as Node)) return;
 
       setOpen(false);
     };
 
-    // capture로 모든 스크롤 감지
+    // Detect all scroll events with capture
     document.addEventListener("scroll", handleScroll, { capture: true });
     onCleanup(() => document.removeEventListener("scroll", handleScroll, { capture: true }));
   });
 
-  // resize 감지 (뷰포트 크기 변경 시 닫기)
+  // Detect resize (close when viewport size changes)
   createEffect(() => {
     if (!open()) return;
 
@@ -396,20 +409,20 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     onCleanup(() => window.removeEventListener("resize", handleResize));
   });
 
-  // transitionend 이벤트 처리
+  // Handle transitionend event
   const handleTransitionEnd = (e: TransitionEvent) => {
-    // opacity 전환 완료 시에만 처리
+    // Only handle when opacity transition completes
     if (e.propertyName !== "opacity") return;
 
     if (!open()) {
-      // 닫힘 애니메이션 완료 -> DOM에서 제거
+      // Closing animation complete -> remove from DOM
       unmount();
     }
   };
 
   const maxHeight = () => local.maxHeight ?? 300;
 
-  // 애니메이션 클래스 (opacity와 transform만 transition, 위치 속성은 제외)
+  // Animation class (only transition opacity and transform, not position properties)
   const animationClass = () => {
     const base = "transition-[opacity,transform] duration-150 ease-out";
     const visible = animating();
@@ -426,12 +439,13 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
     <DropdownContext.Provider value={{ toggle, setTrigger, setContent }}>
       {local.children}
 
-      {/* Trigger 슬롯 렌더링 (wrapper div에 click/keyboard handler 부착) */}
+      {/* Render trigger slot (attach click/keyboard handlers to wrapper div) */}
       <Show when={triggerSlot()}>
         <div
           ref={(el) => {
             triggerRef = el;
           }}
+          tabIndex={-1}
           data-dropdown-trigger
           onClick={toggle}
           onKeyDown={handleTriggerKeyDown}
@@ -440,7 +454,7 @@ export const Dropdown: DropdownComponent = ((props: DropdownProps) => {
         </div>
       </Show>
 
-      {/* Content 슬롯: Portal + 팝업 */}
+      {/* Content slot: Portal + popup */}
       <Show when={mounted()}>
         <Portal>
           <div

package/src/components/disclosure/Tabs.tsx

@@ -25,7 +25,7 @@ interface TabsTabProps {
 
 function TabsTabInner(props: TabsTabProps) {
   const ctx = useContext(TabsContext);
-  if (!ctx) throw new Error("Tabs.Tab은 Tabs 내부에서만 사용할 수 있습니다");
+  if (!ctx) throw new Error("Tabs.Tab can only be used inside Tabs");
 
   const isSelected = () => ctx.value() === props.value;
 

package/src/components/disclosure/dialogZIndex.ts

@@ -1,24 +1,24 @@
 /**
- * Dialog z-index 레지스트리
+ * Dialog z-index registry
  *
- * 열린 Dialog의 z-index를 관리하여 무한 증가를 방지한다.
- * 기본 시작값 2000 (tailwind z-modal과 동일), 최대 열린 Dialog 수만큼만 사용.
+ * Manages z-index of open Dialogs to prevent infinite increase.
+ * Base starting value is 2000 (same as tailwind z-modal), uses only as many as there are open Dialogs.
  */
 
 const BASE_Z = 2000;
 
-// 열린 Dialog wrapper 요소 목록 (순서 = z-index 순서)
+// List of open Dialog wrapper elements (order = z-index order)
 const stack: HTMLElement[] = [];
 
-/** Dialog 등록 — 스택 최상위에 추가하고 z-index 할당 */
+/** Register Dialog — add to top of stack and assign z-index */
 export function registerDialog(el: HTMLElement): void {
   const idx = stack.indexOf(el);
-  if (idx >= 0) return; // 이미 등록됨
+  if (idx >= 0) return; // Already registered
   stack.push(el);
   el.style.zIndex = (BASE_Z + stack.length - 1).toString();
 }
 
-/** Dialog 해제 — 스택에서 제거하고 나머지 재정렬 */
+/** Unregister Dialog — remove from stack and reorder rest */
 export function unregisterDialog(el: HTMLElement): void {
   const idx = stack.indexOf(el);
   if (idx < 0) return;
@@ -26,23 +26,28 @@ export function unregisterDialog(el: HTMLElement): void {
   reindex();
 }
 
-/** Dialog를 최상위로 올림 (포커스 시) */
+/** Bring Dialog to front (on focus) */
 export function bringToFront(el: HTMLElement): void {
   const idx = stack.indexOf(el);
-  if (idx < 0 || idx === stack.length - 1) return; // 이미 최상위
+  if (idx < 0 || idx === stack.length - 1) return; // Already at front
   stack.splice(idx, 1);
   stack.push(el);
   reindex();
 }
 
-/** 스택 순서대로 z-index 재할당 */
+/** Reassign z-index in stack order */
 function reindex(): void {
   for (let i = 0; i < stack.length; i++) {
     stack[i].style.zIndex = (BASE_Z + i).toString();
   }
 }
 
-/** 해당 Dialog가 스택 최상위인지 확인 */
+/** Check if Dialog is at top of stack */
 export function isTopmost(el: HTMLElement): boolean {
   return stack.length > 0 && stack[stack.length - 1] === el;
 }
+
+/** Get the topmost (front-most) Dialog element, or null if none are open */
+export function getTopmostDialog(): HTMLElement | null {
+  return stack.length > 0 ? stack[stack.length - 1] : null;
+}

package/src/components/display/Echarts.tsx

@@ -24,7 +24,7 @@ export const Echarts: Component<EchartsProps> = (props) => {
   let chart: echartsType.EChartsType | undefined;
   const [ready, setReady] = createSignal(false);
 
-  // 마운트 시 echarts 동적 로드 + 차트 초기화
+  // On mount, dynamically load echarts + initialize chart
   createEffect(() => {
     void import("echarts").then((echarts) => {
       chart = echarts.init(containerRef, null, { renderer: "svg" });
@@ -34,13 +34,13 @@ export const Echarts: Component<EchartsProps> = (props) => {
     onCleanup(() => chart?.dispose());
   });
 
-  // option 변경 감지
+  // Detect option changes
   createEffect(() => {
     if (!ready()) return;
     chart!.setOption(local.option);
   });
 
-  // busy 상태 변경 감지
+  // Detect busy state changes
   createEffect(() => {
     if (!ready()) return;
     if (local.busy) {
@@ -50,7 +50,7 @@ export const Echarts: Component<EchartsProps> = (props) => {
     }
   });
 
-  // 컨테이너 크기 변경 감지
+  // Detect container size changes
   createResizeObserver(containerRef, () => {
     chart?.resize();
   });

package/src/components/features/address/AddressSearch.tsx

@@ -22,7 +22,7 @@ export const AddressSearchContent: Component = () => {
         scriptEl.setAttribute("id", "daum_address");
 
         scriptEl.onload = (): void => {
-          // @ts-expect-error -- Daum Postcode 글로벌 API
+          // @ts-expect-error -- Daum Postcode global API
           daum.postcode.load(() => {
             resolve();
           });
@@ -31,7 +31,7 @@ export const AddressSearchContent: Component = () => {
       });
     }
 
-    // @ts-expect-error -- Daum Postcode 글로벌 API
+    // @ts-expect-error -- Daum Postcode global API
     new daum.Postcode({
       oncomplete: (data: any): void => {
         const addr = data.userSelectedType === "R" ? data.roadAddress : data.jibunAddress;