@simplysm/solid 13.0.69 → 13.0.71

package/src/components/disclosure/Collapse.tsx

@@ -13,11 +13,11 @@ import { mergeStyles } from "../../helpers/mergeStyles";
 
 export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /**
-   * 콘텐츠 표시 여부. 기본값: false (닫힘)
+   * Whether to show content. Default: false (closed)
    *
-   * 접근성 참고:
-   * - 토글 버튼에 `aria-expanded`와 `aria-controls`를 사용하세요.
-   * - `Button` 컴포넌트를 사용하면 Enter/Space 키보드 접근성이 자동 지원됩니다.
+   * Accessibility note:
+   * - Use `aria-expanded` and `aria-controls` on the toggle button.
+   * - If using the `Button` component, Enter/Space keyboard accessibility is automatically supported.
    *
    * @example
    * ```tsx
@@ -40,24 +40,24 @@ const transitionClass = clsx(
 export const Collapse: ParentComponent<CollapseProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style", "open"]);
 
-  // 콘텐츠 요소 ref
+  // Content element ref
   const [contentRef, setContentRef] = createSignal<HTMLDivElement>();
 
-  // 콘텐츠 높이 추적
+  // Track content height
   const size = createElementSize(contentRef);
 
-  // 초기 렌더링 시 transition 비활성화 (깜빡임 방지)
-  // requestAnimationFrame으로 다음 프레임에 활성화
+  // Disable transition on initial render (prevent flickering)
+  // Enable it on the next frame via requestAnimationFrame
   const [mounted, setMounted] = createSignal(false);
   onMount(() => {
     const rafId = requestAnimationFrame(() => setMounted(true));
     onCleanup(() => cancelAnimationFrame(rafId));
   });
 
-  // open이 undefined일 때 false로 처리
+  // Treat undefined open as false
   const isOpen = () => local.open ?? false;
 
-  // margin-top 계산
+  // Calculate margin-top
   const marginTop = () => (isOpen() ? undefined : `${-(size.height ?? 0)}px`);
 
   return (
@@ -72,7 +72,7 @@ export const Collapse: ParentComponent<CollapseProps> = (props) => {
         class={mounted() ? transitionClass : ""}
         style={{
           "margin-top": marginTop(),
-          // 닫힌 상태에서 포커스 가능 요소 접근 차단 및 FOUC 방지
+          // When closed, prevent access to focusable elements and prevent FOUC
           "visibility": !isOpen() ? "hidden" : undefined,
         }}
       >

package/src/components/disclosure/Dialog.tsx

@@ -21,6 +21,7 @@ import { createMountTransition } from "../../hooks/createMountTransition";
 import { startPointerDrag } from "../../helpers/startPointerDrag";
 import { createSlotComponent } from "../../helpers/createSlotComponent";
 import { mergeStyles } from "../../helpers/mergeStyles";
+import { useI18nOptional } from "../../providers/i18n/I18nContext";
 import { Icon } from "../display/Icon";
 import { borderSubtle } from "../../styles/tokens.styles";
 import { DialogDefaultsContext } from "./DialogContext";
@@ -38,41 +39,41 @@ const DialogHeader = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setHea
 const DialogAction = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setAction);
 
 export interface DialogProps {
-  /** 모달 열림 상태 */
+  /** Modal open state */
   open?: boolean;
-  /** 열림 상태 변경 시 콜백 */
+  /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
-  /** 닫기 버튼 표시 (기본: true) */
+  /** Show close button (default: true) */
   closable?: boolean;
-  /** 백드롭 클릭으로 닫기 */
+  /** Close on backdrop click */
   closeOnBackdrop?: boolean;
-  /** Escape 키로 닫기 (기본값: true) */
+  /** Close on Escape key (default: true) */
   closeOnEscape?: boolean;
-  /** 리사이즈 가능 여부 (기본: false) */
+  /** Resizable (default: false) */
   resizable?: boolean;
-  /** 드래그 이동 가능 여부 (기본: true) */
+  /** Draggable (default: true) */
   movable?: boolean;
-  /** 플로팅 모드 (백드롭 없음) */
+  /** Floating mode (no backdrop) */
   float?: boolean;
-  /** 전체 화면 모드 */
+  /** Full-screen mode */
   fill?: boolean;
-  /** 너비 */
+  /** Width */
   width?: number;
-  /** 높이 */
+  /** Height */
   height?: number;
-  /** 최소 너비 */
+  /** Minimum width */
   minWidth?: number;
-  /** 최소 높이 */
+  /** Minimum height */
   minHeight?: number;
-  /** 고정 위치 */
+  /** Fixed position */
   position?: "bottom-right" | "top-right";
-  /** 헤더 스타일 */
+  /** Header style */
   headerStyle?: JSX.CSSProperties | string;
-  /** 닫기 전 확인 함수 */
+  /** Confirmation function before closing */
   canDeactivate?: () => boolean;
-  /** 닫기 애니메이션 완료 후 콜백 */
+  /** Callback after close animation completes */
   onCloseComplete?: () => void;
-  /** 추가 CSS 클래스 */
+  /** Additional CSS class */
   class?: string;
 }
 
@@ -122,19 +123,19 @@ const resizePositionMap: Record<ResizeDirection, string> = {
 };
 
 /**
- * 다이얼로그 컴포넌트
+ * Dialog component
  *
- * 선언적 다이얼로그 UI를 제공합니다. 드래그 이동, 8방향 리사이즈,
- * float/fill 모드, z-index 자동 관리 등을 지원합니다.
+ * Provides a declarative dialog UI. Supports dragging, 8-directional resizing,
+ * float/fill modes, automatic z-index management, and more.
  *
  * @example
  * ```tsx
  * const [open, setOpen] = createSignal(false);
  *
- * <Button onClick={() => setOpen(true)}>다이얼로그 열기</Button>
+ * <Button onClick={() => setOpen(true)}>Open Dialog</Button>
  * <Dialog open={open()} onOpenChange={setOpen}>
- *   <Dialog.Header>내 다이얼로그</Dialog.Header>
- *   <div class="p-4">다이얼로그 내용</div>
+ *   <Dialog.Header>My Dialog</Dialog.Header>
+ *   <div class="p-4">Dialog content</div>
  * </Dialog>
  * ```
  */
@@ -145,6 +146,7 @@ interface DialogComponent extends ParentComponent<DialogProps> {
 
 export const Dialog: DialogComponent = (props) => {
   const dialogDefaults = useContext(DialogDefaultsContext);
+  const i18n = useI18nOptional();
 
   const [local] = splitProps(props, [
     "open",
@@ -179,10 +181,10 @@ export const Dialog: DialogComponent = (props) => {
     onChange: () => local.onOpenChange,
   });
 
-  // 애니메이션 상태 (mount transition)
+  // Animation state (mount transition)
   const { mounted, animating, unmount } = createMountTransition(open);
 
-  // onCloseComplete 중복 호출 방지
+  // Prevent duplicate onCloseComplete calls
   let closeCompleteEmitted = false;
 
   const emitCloseComplete = () => {
@@ -192,7 +194,7 @@ export const Dialog: DialogComponent = (props) => {
     local.onCloseComplete?.();
   };
 
-  // open 변경 시 closeCompleteEmitted 초기화 + fallback unmount 감지
+  // Reset closeCompleteEmitted when open changes + detect fallback unmount
   let wasMounted = false;
   createEffect(() => {
     if (open()) {
@@ -201,23 +203,23 @@ export const Dialog: DialogComponent = (props) => {
     if (mounted()) {
       wasMounted = true;
     } else if (wasMounted) {
-      // fallback timer가 transitionend보다 먼저 실행되어 DOM이 제거된 경우,
-      // onCloseComplete가 호출되지 않는 문제 방지
+      // Prevent onCloseComplete from not being called when fallback timer runs
+      // before transitionend and removes DOM
       emitCloseComplete();
     }
   });
 
-  // dialog ref
+  // Dialog ref
   let dialogRef: HTMLDivElement | undefined;
 
-  // wrapper ref (signal로 관리하여 Portal ref 타이밍 보장)
+  // Wrapper ref (managed as signal to guarantee Portal ref timing)
   const [wrapperRef, setWrapperRef] = createSignal<HTMLDivElement>();
 
   const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
   const closeOnBackdrop = () =>
     local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
 
-  // Escape 키 감지
+  // Detect Escape key
   createEffect(() => {
     if (!open()) return;
 
@@ -237,7 +239,7 @@ export const Dialog: DialogComponent = (props) => {
     onCleanup(() => document.removeEventListener("keydown", handleKeyDown));
   });
 
-  // 열릴 때 등록, 닫힐 때 해제
+  // Register when opening, unregister when closing
   createEffect(() => {
     if (!open()) return;
     const el = wrapperRef();
@@ -246,24 +248,24 @@ export const Dialog: DialogComponent = (props) => {
     onCleanup(() => unregisterDialog(el));
   });
 
-  // 닫기 시도 (canDeactivate 체크)
+  // Attempt to close (check canDeactivate)
   const tryClose = () => {
     if (local.canDeactivate && !local.canDeactivate()) return;
     setOpen(false);
   };
 
-  // 백드롭 클릭 핸들러
+  // Backdrop click handler
   const handleBackdropClick = () => {
     if (!closeOnBackdrop()) return;
     tryClose();
   };
 
-  // 닫기 버튼 클릭 핸들러
+  // Close button click handler
   const handleCloseClick = () => {
     tryClose();
   };
 
-  // transitionend 이벤트 처리
+  // Handle transitionend event
   const handleTransitionEnd = (e: TransitionEvent) => {
     if (e.propertyName !== "opacity") return;
     if (!open()) {
@@ -271,20 +273,20 @@ export const Dialog: DialogComponent = (props) => {
     }
   };
 
-  // z-index 자동 관리
+  // Automatic z-index management
   const handleDialogFocus = () => {
     const el = wrapperRef();
     if (!el) return;
     bringToFront(el);
   };
 
-  // 드래그 이동
+  // Dragging
   const handleHeaderPointerDown = (event: PointerEvent) => {
-    // movable 기본값은 true
+    // movable default is true
     if (local.movable === false) return;
     const wrapperEl = wrapperRef();
     if (!dialogRef || !wrapperEl) return;
-    // 닫기 버튼 등 인터랙티브 요소에서 시작된 이벤트는 드래그로 처리하지 않음
+    // Do not treat events from interactive elements like close button as drag
     if ((event.target as HTMLElement).closest("button")) return;
 
     const target = event.currentTarget as HTMLElement;
@@ -307,7 +309,7 @@ export const Dialog: DialogComponent = (props) => {
         dialogEl.style.bottom = "auto";
         dialogEl.style.margin = "0";
 
-        // 화면 밖 방지
+        // Prevent off-screen
         if (dialogEl.offsetLeft > wrapperEl.offsetWidth - 100) {
           dialogEl.style.left = wrapperEl.offsetWidth - 100 + "px";
         }
@@ -328,7 +330,7 @@ export const Dialog: DialogComponent = (props) => {
     });
   };
 
-  // 리사이즈
+  // Resize
   const handleResizeBarPointerDown = (event: PointerEvent, direction: ResizeDirection) => {
     if (!local.resizable) return;
     if (!dialogRef) return;
@@ -381,7 +383,7 @@ export const Dialog: DialogComponent = (props) => {
     });
   };
 
-  // dialog 인라인 스타일 계산
+  // Calculate dialog inline styles
   const dialogStyle = (): JSX.CSSProperties => {
     const style: JSX.CSSProperties = {};
 
@@ -404,7 +406,7 @@ export const Dialog: DialogComponent = (props) => {
       style["min-height"] = `${local.minHeight}px`;
     }
 
-    // position 모드
+    // Position mode
     if (local.position === "bottom-right") {
       style.position = "absolute";
       style.right = "3rem";
@@ -418,7 +420,7 @@ export const Dialog: DialogComponent = (props) => {
     return style;
   };
 
-  // 애니메이션 클래스
+  // Animation class
   const animationClass = () => {
     const base = clsx("transition-[opacity,transform]", "duration-200", "ease-out");
     if (animating()) {
@@ -428,9 +430,9 @@ export const Dialog: DialogComponent = (props) => {
     }
   };
 
-  // wrapper 클래스
+  // Wrapper class
   const wrapperClass = () =>
-    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0은 Chrome 84 미지원
+    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
     clsx(
       "fixed bottom-0 left-0 right-0 top-0",
       "flex flex-col items-center",
@@ -438,9 +440,9 @@ export const Dialog: DialogComponent = (props) => {
       local.float && "pointer-events-none",
     );
 
-  // 백드롭 클래스
+  // Backdrop class
   const backdropClass = () =>
-    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0은 Chrome 84 미지원
+    // eslint-disable-next-line tailwindcss/enforces-shorthand -- inset-0 not supported in Chrome 84
     clsx(
       "absolute bottom-0 left-0 right-0 top-0",
       "bg-black/30",
@@ -451,7 +453,7 @@ export const Dialog: DialogComponent = (props) => {
       animating() ? "opacity-100" : "opacity-0",
     );
 
-  // dialog 클래스
+  // Dialog class
   const dialogBaseClass = () =>
     clsx(
       "relative",
@@ -469,7 +471,7 @@ export const Dialog: DialogComponent = (props) => {
       animationClass(),
     );
 
-  // 헤더 클래스
+  // Header class
   const headerClass = () =>
     clsx("flex items-center gap-2", "px-3 py-1", "select-none", "border-b", borderSubtle);
 
@@ -478,12 +480,12 @@ export const Dialog: DialogComponent = (props) => {
       <Portal>
         <DialogSlotsContext.Provider value={{ setHeader, setAction }}>
           <div ref={setWrapperRef} data-modal class={wrapperClass()}>
-            {/* 백드롭 */}
+            {/* Backdrop */}
             <Show when={!local.float}>
               <div data-modal-backdrop class={backdropClass()} onClick={handleBackdropClick} />
             </Show>
 
-            {/* 다이얼로그 */}
+            {/* Dialog */}
             <div
               ref={(el) => {
                 dialogRef = el;
@@ -498,7 +500,7 @@ export const Dialog: DialogComponent = (props) => {
               onFocus={handleDialogFocus}
               onTransitionEnd={handleTransitionEnd}
             >
-              {/* 헤더 */}
+              {/* Header */}
               <Show when={hasHeader()}>
                 <div
                   data-modal-header
@@ -519,6 +521,7 @@ export const Dialog: DialogComponent = (props) => {
                       data-modal-close
                       size={"sm"}
                       variant={"ghost"}
+                      aria-label={i18n?.t("dialog.close") ?? "Close dialog"}
                       onClick={handleCloseClick}
                     >
                       <Icon icon={IconX} />
@@ -527,12 +530,12 @@ export const Dialog: DialogComponent = (props) => {
                 </div>
               </Show>
 
-              {/* 콘텐츠 */}
+              {/* Content */}
               <div data-modal-content class={dialogContentClass}>
                 {local.children}
               </div>
 
-              {/* 리사이즈 바 */}
+              {/* Resize bars */}
               <Show when={local.resizable}>
                 <For each={RESIZE_DIRECTIONS}>
                   {(direction) => (

package/src/components/disclosure/DialogContext.ts

@@ -1,69 +1,69 @@
 import { createContext, useContext, type Accessor, type JSX } from "solid-js";
 
-/** 다이얼로그 기본 설정 */
+/** Dialog default configuration */
 export interface DialogDefaults {
-  /** ESC 키로 닫기 허용 */
+  /** Allow closing via ESC key */
   closeOnEscape?: boolean;
-  /** 백드롭 클릭으로 닫기 허용 */
+  /** Allow closing via backdrop click */
   closeOnBackdrop?: boolean;
 }
 
-/** 다이얼로그 기본 설정 Context */
+/** Dialog default configuration Context */
 export const DialogDefaultsContext = createContext<Accessor<DialogDefaults>>();
 
-/** 프로그래매틱 다이얼로그 옵션 */
+/** Programmatic dialog options */
 export interface DialogShowOptions {
-  /** 다이얼로그 헤더 */
+  /** Dialog header */
   header?: JSX.Element;
-  /** 닫기 버튼 표시 */
+  /** Show close button */
   closable?: boolean;
-  /** 백드롭 클릭으로 닫기 */
+  /** Close on backdrop click */
   closeOnBackdrop?: boolean;
-  /** ESC 키로 닫기 */
+  /** Close on ESC key */
   closeOnEscape?: boolean;
-  /** 크기 조절 가능 */
+  /** Resizable */
   resizable?: boolean;
-  /** 드래그 이동 가능 */
+  /** Draggable */
   movable?: boolean;
-  /** 플로팅 모드 (우하단 고정) */
+  /** Floating mode (fixed to bottom-right) */
   float?: boolean;
-  /** 전체 화면 채우기 */
+  /** Fill full screen */
   fill?: boolean;
-  /** 초기 너비 (px) */
+  /** Initial width (px) */
   width?: number;
-  /** 초기 높이 (px) */
+  /** Initial height (px) */
   height?: number;
-  /** 최소 너비 (px) */
+  /** Minimum width (px) */
   minWidth?: number;
-  /** 최소 높이 (px) */
+  /** Minimum height (px) */
   minHeight?: number;
-  /** 플로팅 위치 */
+  /** Floating position */
   position?: "bottom-right" | "top-right";
-  /** 헤더 커스텀 스타일 */
+  /** Custom header style */
   headerStyle?: JSX.CSSProperties | string;
-  /** 닫기 전 확인 함수 (false 반환 시 닫기 취소) */
+  /** Confirmation function before closing (return false to cancel) */
   canDeactivate?: () => boolean;
 }
 
-/** 프로그래매틱 다이얼로그 Context 값 */
+/** Programmatic dialog Context value */
 export interface DialogContextValue {
-  /** 다이얼로그를 열고, 닫힐 때까지 대기하여 결과를 반환 */
+  /** Open dialog and wait until closing, returns result */
   show<T = undefined>(
     factory: () => JSX.Element,
     options: DialogShowOptions,
   ): Promise<T | undefined>;
 }
 
-/** 프로그래매틱 다이얼로그 Context */
+/** Programmatic dialog Context */
 export const DialogContext = createContext<DialogContextValue>();
 
 /**
- * 프로그래매틱 다이얼로그에 접근하는 훅
+ * Hook to access programmatic dialogs
  *
- * @throws DialogProvider가 없으면 에러 발생
+ * @throws Throws error if DialogProvider is not present
  */
 export function useDialog(): DialogContextValue {
   const ctx = useContext(DialogContext);
-  if (!ctx) throw new Error("useDialog는 DialogProvider 내부에서만 사용할 수 있습니다");
+  if (!ctx) throw new Error("useDialog can only be used inside DialogProvider");
   return ctx;
 }

package/src/components/disclosure/DialogInstanceContext.ts

@@ -1,24 +1,24 @@
 import { createContext, useContext } from "solid-js";
 
 /**
- * 다이얼로그 인스턴스 (프로그래매틱 다이얼로그 내부에서 사용)
+ * Dialog instance (used internally within programmatic dialogs)
  */
 export interface DialogInstance<TResult> {
-  /** 다이얼로그 닫기 (result는 show()의 Promise로 전달) */
+  /** Close dialog (result is passed to show() Promise) */
   close: (result?: TResult) => void;
 }
 
-/** 다이얼로그 인스턴스 Context */
+/** Dialog instance Context */
 export const DialogInstanceContext = createContext<DialogInstance<unknown>>();
 
 /**
- * 다이얼로그 인스턴스에 접근하는 훅
+ * Hook to access dialog instance
  *
  * @remarks
- * DialogProvider.show()로 열린 다이얼로그 내부에서만 값이 존재한다.
- * Provider 외부에서 호출하면 undefined를 반환한다.
+ * Only has a value inside a dialog opened via DialogProvider.show().
+ * Returns undefined when called outside the Provider.
  *
- * @returns DialogInstance 또는 undefined (Provider 외부)
+ * @returns DialogInstance or undefined (outside Provider)
  */
 export function useDialogInstance<TResult = undefined>(): DialogInstance<TResult> | undefined {
   return useContext(DialogInstanceContext) as DialogInstance<TResult> | undefined;

package/src/components/disclosure/DialogProvider.tsx

@@ -30,10 +30,10 @@ interface DialogEntry {
 let nextId = 0;
 
 /**
- * 프로그래매틱 다이얼로그 Provider
+ * Programmatic dialog Provider
  *
- * `useDialog().show(content, options)` 로 다이얼로그를 열고,
- * `close(result)` 로 닫으면 Promise가 resolve됩니다.
+ * Open dialogs with `useDialog().show(content, options)`,
+ * and close them with `close(result)` to resolve the Promise.
  *
  * @example
  * ```tsx
@@ -73,7 +73,7 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
     });
   };
 
-  // 닫기 애니메이션 시작 (open을 false로 변경)
+  // Start close animation (set open to false)
   const requestClose = (id: string, result?: unknown) => {
     const entry = entries().find((e) => e.id === id);
     if (entry) {
@@ -82,7 +82,7 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
     }
   };
 
-  // 애니메이션 완료 후 실제 제거
+  // Actually remove after animation completes
   const removeEntry = (id: string) => {
     setEntries((prev) => {
       const entry = prev.find((e) => e.id === id);