@simplysm/solid 13.0.69 → 13.0.70

package/src/components/form-control/select/Select.tsx

@@ -25,35 +25,36 @@ import {
   borderSubtle,
   type ComponentSize,
   textMuted,
-  textPlaceholder,
 } from "../../../styles/tokens.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import { chevronWrapperClass, getTriggerClass } from "../DropdownTrigger.styles";
 import { Invalid } from "../Invalid";
+import { TextInput } from "../field/TextInput";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 void ripple;
 
-// Select 전용 스타일
+// Select-specific styles
 const multiTagClass = clsx("rounded", "bg-base-200 px-1", "dark:bg-base-600");
 const selectedValueClass = clsx("flex-1", "whitespace-nowrap");
 
-// 검색 입력 스타일
+// Search input styles (override TextInput wrapper)
 const searchInputClass = clsx(
   "w-full",
-  "border-b",
+  "rounded-none",
+  "border-0 border-b",
   borderSubtle,
-  "bg-transparent",
-  "px-2 py-1.5",
+  "bg-transparent dark:bg-transparent",
+  "h-auto",
+  "py-1.5",
   "text-sm",
-  "outline-none",
-  textPlaceholder,
 );
 
-// 전체선택/해제 버튼 영역 스타일
+// Select all/deselect all button area styles
 const selectAllBarClass = clsx("flex gap-2", "border-b", borderSubtle, "px-2 py-1", "text-xs");
 
-// 전체선택/해제 버튼 스타일
+// Select all/deselect all button styles
 const selectAllBtnClass = clsx(
   "text-primary-500",
   "hover:text-primary-600 dark:hover:text-primary-400",
@@ -61,7 +62,7 @@ const selectAllBtnClass = clsx(
 );
 
 /**
- * Select 우측 액션 서브 컴포넌트
+ * Select right-side action sub-component
  */
 interface SelectActionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {}
 
@@ -100,11 +101,11 @@ const SelectAction: ParentComponent<SelectActionProps> = (props) => {
 };
 
 /**
- * 드롭다운 상단 커스텀 영역 서브 컴포넌트
+ * Dropdown top custom area sub-component
  */
 const SelectHeader: ParentComponent = (props) => {
   const ctx = useSelectContext();
-  // eslint-disable-next-line solid/reactivity -- 슬롯 accessor로 저장, JSX tracked scope에서 호출됨
+  // eslint-disable-next-line solid/reactivity -- Save as slot accessor, called from JSX tracked scope
   ctx.setHeader(() => props.children);
   onCleanup(() => ctx.setHeader(undefined));
   return null;
@@ -114,87 +115,87 @@ const SelectItemTemplate = <TArgs extends unknown[]>(props: {
   children: (...args: TArgs) => JSX.Element;
 }) => {
   const ctx = useSelectContext();
-  // eslint-disable-next-line solid/reactivity -- 렌더 함수를 signal에 저장, JSX tracked scope에서 호출됨
+  // eslint-disable-next-line solid/reactivity -- Store render function in signal, called from JSX tracked scope
   ctx.setItemTemplate(props.children as (...args: unknown[]) => JSX.Element);
   onCleanup(() => ctx.setItemTemplate(undefined));
   return null;
 };
 
-// Props 정의
+// Props definition
 
-// 공통 Props (value, onValueChange, multiple 제외)
+// Common Props (except value, onValueChange, multiple)
 interface SelectCommonProps<TValue = unknown> {
-  /** 비활성화 */
+  /** Disabled state */
   disabled?: boolean;
 
-  /** 필수 입력 */
+  /** Required input */
   required?: boolean;
 
-  /** 미선택 시 표시 텍스트 */
+  /** Placeholder text when no value selected */
   placeholder?: string;
 
-  /** 트리거 크기 */
+  /** Trigger size */
   size?: ComponentSize;
 
-  /** 테두리 없는 스타일 */
+  /** Borderless style */
   inset?: boolean;
 
-  /** 커스텀 유효성 검사 함수 */
+  /** Custom validation function */
   validate?: (value: unknown) => string | undefined;
 
-  /** touchMode: 포커스 해제 후에만 에러 표시 */
+  /** touchMode: Show error only after blur */
   touchMode?: boolean;
 
-  /** 검색 텍스트 추출 함수 (설정 시 검색 입력 자동 표시) */
+  /** Search text extraction function (shows search input when set) */
   getSearchText?: (item: TValue) => string;
 
-  /** 숨김 여부 판별 함수 */
+  /** Function to determine if item is hidden */
   getIsHidden?: (item: TValue) => boolean;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 }
 
-// 단일 선택 Props
+// Single select Props
 interface SelectSingleBaseProps<TValue> extends SelectCommonProps<TValue> {
-  /** 다중 선택 모드 */
+  /** Single select mode */
   multiple?: false;
 
-  /** 현재 선택된 값 */
+  /** Currently selected value */
   value?: TValue;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: TValue) => void;
 
-  /** 다중 선택 시 표시 방향 (단일 선택에서는 사용 안 함) */
+  /** Display direction for multiple select (not used in single select) */
   multiDisplayDirection?: never;
 
-  /** 전체 선택 버튼 숨기기 (단일 선택에서는 사용 안 함) */
+  /** Hide select all button (not used in single select) */
   hideSelectAll?: never;
 }
 
-// 다중 선택 Props
+// Multiple select Props
 interface SelectMultipleBaseProps<TValue> extends SelectCommonProps<TValue> {
-  /** 다중 선택 모드 */
+  /** Multiple select mode */
   multiple: true;
 
-  /** 현재 선택된 값 */
+  /** Currently selected values */
   value?: TValue[];
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: TValue[]) => void;
 
-  /** 다중 선택 시 표시 방향 */
+  /** Display direction for multiple select */
   multiDisplayDirection?: "horizontal" | "vertical";
 
-  /** 전체 선택 버튼 숨기기 */
+  /** Hide select all button */
   hideSelectAll?: boolean;
 }
 
-// items 방식
+// items mode
 interface SelectWithItemsPropsBase<TValue> {
   items: TValue[];
   getChildren?: (item: TValue, index: number, depth: number) => TValue[] | undefined;
@@ -202,7 +203,7 @@ interface SelectWithItemsPropsBase<TValue> {
   children?: JSX.Element;
 }
 
-// children 방식
+// children mode
 interface SelectWithChildrenPropsBase<TValue> {
   items?: never;
   getChildren?: never;
@@ -225,17 +226,17 @@ interface SelectComponent {
 }
 
 /**
- * Select 컴포넌트
+ * Select component
  *
  * @example
  * ```tsx
- * // children 방식
+ * // children mode
  * <Select value={selected()} onValueChange={setSelected} renderValue={(v) => v.name}>
  *   <Select.Item value={item1}>{item1.name}</Select.Item>
  *   <Select.Item value={item2}>{item2.name}</Select.Item>
  * </Select>
  *
- * // items prop 방식
+ * // items prop mode
  * <Select items={data} value={selected()} onValueChange={setSelected}>
  *   <Select.ItemTemplate>
  *     {(item) => <>{item.name}</>}
@@ -267,26 +268,27 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "getIsHidden",
   ]);
 
+  const i18n = useI18nOptional();
   const [open, setOpen] = createSignal(false);
 
-  // 검색 텍스트 signal
+  // Search text signal
   const [searchText, setSearchText] = createSignal("");
 
-  // open → false 시 searchText 초기화
+  // Reset searchText when open becomes false
   createEffect(() => {
     if (!open()) {
       setSearchText("");
     }
   });
 
-  // 선택된 값 관리 (controlled/uncontrolled 패턴)
+  // Manage selected value (controlled/uncontrolled pattern)
   type ValueType = T | T[] | undefined;
   const [value, setValue] = createControllableSignal<ValueType>({
     value: () => local.value,
     onChange: () => local.onValueChange as ((v: ValueType) => void) | undefined,
   } as Parameters<typeof createControllableSignal<ValueType>>[0]);
 
-  // 값이 선택되어 있는지 확인
+  // Check if value is selected
   const isSelected = (itemValue: T): boolean => {
     const current = value();
     if (current === undefined) return false;
@@ -297,7 +299,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     return current === itemValue;
   };
 
-  // 값 토글
+  // Toggle value
   const toggleValue = (itemValue: T) => {
     if (local.multiple) {
       const current = (value() as T[] | undefined) ?? [];
@@ -312,12 +314,12 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     }
   };
 
-  // 드롭다운 닫기
+  // Close dropdown
   const closeDropdown = () => {
     setOpen(false);
   };
 
-  // 슬롯 signals
+  // Slot signals
   const [header, setHeader] = createSlotSignal();
   const [action, setAction] = createSlotSignal();
   const [itemTemplate, _setItemTemplate] = createSignal<
@@ -326,7 +328,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   const setItemTemplate = (fn: ((...args: unknown[]) => JSX.Element) | undefined) =>
     _setItemTemplate(() => fn);
 
-  // Context 값
+  // Context value
   const contextValue: SelectContextValue<T> = {
     multiple: () => local.multiple ?? false,
     isSelected,
@@ -337,7 +339,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     setItemTemplate,
   };
 
-  // 트리거 키보드 처리 (Enter/Space만 처리, ArrowUp/Down은 Dropdown이 처리)
+  // Trigger keyboard handling (only Enter/Space, ArrowUp/Down handled by Dropdown)
   const handleTriggerKeyDown = (e: KeyboardEvent) => {
     if (local.disabled) return;
 
@@ -347,15 +349,15 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     }
   };
 
-  // 유효성 검사 메시지
+  // Validation error message
   const errorMsg = createMemo(() => {
     const v = value();
     if (local.required && (v === undefined || v === null || v === ""))
-      return "필수 입력 항목입니다";
+      return "This is a required field";
     return local.validate?.(v);
   });
 
-  // 트리거 클래스
+  // Trigger class
   const getTriggerClassName = () =>
     getTriggerClass({
       size: local.size,
@@ -364,7 +366,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       class: local.class,
     });
 
-  // 검색 필터링 (계층 구조 지원)
+  // Search filtering (supports hierarchical structure)
   const filteredItems = createMemo((): T[] | undefined => {
     if (!local.items) return undefined;
     if (!local.getSearchText || !searchText()) return local.items;
@@ -372,12 +374,12 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     const terms = searchText().trim().split(" ").filter(Boolean);
     if (terms.length === 0) return local.items;
 
-    // 계층 구조에서 자식 매칭 시 부모도 포함
+    // Include parent when child matches in hierarchical structure
     const matchesSearch = (item: T): boolean => {
       const text = local.getSearchText!(item).toLowerCase();
       if (terms.every((t) => text.includes(t.toLowerCase()))) return true;
 
-      // 자식 중 매칭되는 항목이 있으면 부모도 표시
+      // Show parent if any child matches
       if (local.getChildren) {
         const itemChildren = local.getChildren(item, 0, 0);
         if (itemChildren?.some((child) => matchesSearch(child))) return true;
@@ -389,13 +391,13 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     return local.items.filter((item) => matchesSearch(item));
   });
 
-  // 숨김 필터링 적용된 items
+  // Items with hidden filter applied
   const visibleItems = createMemo((): T[] | undefined => {
     const items = filteredItems();
     if (!items || !local.getIsHidden) return items;
 
     return items.filter((item) => {
-      // 숨김 항목이지만 선택된 경우 표시 (취소선으로)
+      // Show hidden item if selected (with strikethrough)
       if (local.getIsHidden!(item)) {
         return isSelected(item);
       }
@@ -403,31 +405,31 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     });
   });
 
-  // 전체선택
+  // Select all
   const handleSelectAll = () => {
     const items = visibleItems();
     if (!items) return;
     setValue(items);
   };
 
-  // 전체해제
+  // Deselect all
   const handleDeselectAll = () => {
     setValue([] as unknown as T[]);
   };
 
-  // 내부 컴포넌트: Provider 안에서 children을 resolve하여 슬롯 등록을 트리거
+  // Inner component: resolve children inside Provider to trigger slot registration
   const SelectInner: ParentComponent = (innerProps) => {
-    // children() resolve로 서브 컴포넌트 등록 트리거 (Header, Action, ItemTemplate은 null 반환)
+    // Resolve children() to trigger sub-component registration (Header, Action, ItemTemplate return null)
     const resolved = children(() => innerProps.children);
 
-    // itemTemplate 함수 추출
+    // Extract itemTemplate function
     const getItemTemplate = ():
       | ((item: T, index: number, depth: number) => JSX.Element)
       | undefined => {
       return itemTemplate() as ((item: T, index: number, depth: number) => JSX.Element) | undefined;
     };
 
-    // items 재귀 렌더링
+    // Render items recursively
     const renderItems = (itemList: T[], depth: number): JSX.Element => {
       const tpl = getItemTemplate();
       return (
@@ -439,7 +441,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                 {tpl ? tpl(item, index(), depth) : String(item)}
                 <Show when={local.getChildren?.(item, index(), depth)} keyed>
                   {(itemChildren) => {
-                    // 자식 목록에서 숨김 필터링 적용
+                    // Apply hidden filter to child list
                     const visibleChildren = () => {
                       if (!local.getIsHidden) return itemChildren;
                       return itemChildren.filter((child) => {
@@ -463,7 +465,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       );
     };
 
-    // 선택된 값 렌더링 (items 방식일 때 itemTemplate 재사용)
+    // Render selected value (reuse itemTemplate when in items mode)
     const renderValue = (renderVal: T): JSX.Element => {
       if (local.renderValue) {
         return local.renderValue(renderVal);
@@ -475,7 +477,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       return <>{String(renderVal)}</>;
     };
 
-    // 선택된 값 표시
+    // Display selected value
     const renderSelectedValue = (): JSX.Element => {
       const current = value();
 
@@ -495,10 +497,10 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
       return renderValue(current as T);
     };
 
-    // 미지정 항목 표시 여부: 단일 선택 + required 아님 + items 모드
+    // Show unset item: single select + not required + items mode
     const showUnsetItem = () => !local.multiple && !local.required && local.items !== undefined;
 
-    // 전체선택/해제 버튼 표시 여부: multiple + hideSelectAll 아님 + items 모드
+    // Show select all/deselect bar: multiple + not hideSelectAll + items mode
     const showSelectAllBar = () =>
       local.multiple === true && !local.hideSelectAll && local.items !== undefined;
 
@@ -533,18 +535,16 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
           </Dropdown.Trigger>
           <Dropdown.Content>
             <Show when={header()}>{header()!()}</Show>
-            {/* 검색 입력 */}
+            {/* Search input */}
             <Show when={local.getSearchText && local.items}>
-              <input
-                type="text"
-                data-select-search
-                class={searchInputClass}
-                placeholder="검색..."
+              <TextInput
                 value={searchText()}
-                onInput={(e) => setSearchText(e.currentTarget.value)}
+                onValueChange={setSearchText}
+                placeholder={i18n?.t("select.searchPlaceholder") ?? "Search..."}
+                class={searchInputClass}
               />
             </Show>
-            {/* 전체선택/해제 버튼 */}
+            {/* Select all/deselect buttons */}
             <Show when={showSelectAllBar()}>
               <div class={selectAllBarClass}>
                 <button
@@ -553,7 +553,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                   class={selectAllBtnClass}
                   onClick={handleSelectAll}
                 >
-                  전체선택
+                  {i18n?.t("select.selectAll") ?? "Select all"}
                 </button>
                 <button
                   type="button"
@@ -561,16 +561,16 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                   class={selectAllBtnClass}
                   onClick={handleDeselectAll}
                 >
-                  전체해제
+                  {i18n?.t("select.deselectAll") ?? "Deselect all"}
                 </button>
               </div>
             </Show>
             <List inset role="listbox">
               <Show when={local.items} fallback={resolved()}>
-                {/* 미지정 항목 */}
+                {/* Unset item */}
                 <Show when={showUnsetItem()}>
                   <SelectItem value={undefined as T}>
-                    <span class={textMuted}>미지정</span>
+                    <span class={textMuted}>{i18n?.t("select.unset") ?? "Unset"}</span>
                   </SelectItem>
                 </Show>
                 {renderItems(visibleItems() ?? [], 0)}

package/src/components/form-control/select/SelectContext.ts

@@ -2,25 +2,25 @@ import { createContext, useContext, type Accessor, type JSX } from "solid-js";
 import type { SlotAccessor } from "../../../hooks/createSlotSignal";
 
 export interface SelectContextValue<TValue = unknown> {
-  /** 다중 선택 모드 여부 */
+  /** Whether multiple select mode is enabled */
   multiple: Accessor<boolean>;
 
-  /** 값이 선택되어 있는지 확인 */
+  /** Check if value is selected */
   isSelected: (value: TValue) => boolean;
 
-  /** 값 선택/해제 토글 */
+  /** Toggle value selection/deselection */
   toggleValue: (value: TValue) => void;
 
-  /** 드롭다운 닫기 */
+  /** Close dropdown */
   closeDropdown: () => void;
 
-  /** 헤더 슬롯 등록 */
+  /** Register header slot */
   setHeader: (content: SlotAccessor) => void;
 
-  /** 액션 슬롯 등록 */
+  /** Register action slot */
   setAction: (content: SlotAccessor) => void;
 
-  /** 아이템 템플릿 등록 */
+  /** Register item template */
   setItemTemplate: (fn: ((...args: unknown[]) => JSX.Element) | undefined) => void;
 }
 
@@ -29,7 +29,7 @@ export const SelectContext = createContext<SelectContextValue>();
 export function useSelectContext<TValue = unknown>(): SelectContextValue<TValue> {
   const context = useContext(SelectContext);
   if (!context) {
-    throw new Error("useSelectContext는 Select 컴포넌트 내부에서만 사용할 수 있습니다");
+    throw new Error("useSelectContext can only be used inside Select component");
   }
   return context as SelectContextValue<TValue>;
 }

package/src/components/form-control/select/SelectItem.tsx

@@ -31,10 +31,10 @@ export interface SelectItemProps<TValue = unknown> extends Omit<
   JSX.ButtonHTMLAttributes<HTMLButtonElement>,
   "value" | "onClick"
 > {
-  /** 아이템의 값 */
+  /** Item value */
   value: TValue;
 
-  /** 비활성화 */
+  /** Disabled state */
   disabled?: boolean;
 }
 
@@ -43,13 +43,13 @@ interface SelectItemComponent<TValue = unknown> extends ParentComponent<SelectIt
 }
 
 /**
- * Select 드롭다운 내의 선택 가능한 아이템
+ * Selectable item within Select dropdown
  *
  * @example
  * ```tsx
  * <Select.Item value={item}>{item.name}</Select.Item>
  *
- * // 중첩 아이템
+ * // Nested items
  * <Select.Item value={parent}>
  *   {parent.name}
  *   <Select.Item.Children>
@@ -75,7 +75,7 @@ export const SelectItem: SelectItemComponent = <T,>(
 
     context.toggleValue(local.value);
 
-    // 단일 선택 모드에서만 드롭다운 닫기
+    // Close dropdown only in single select mode
     if (!context.multiple()) {
       context.closeDropdown();
     }

package/src/components/form-control/state-preset/StatePreset.tsx

@@ -117,7 +117,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
 
   const notification = useNotification();
 
-  // presetKey는 마운트 시 한 번만 설정되는 식별자이므로 즉시 평가하여 캡처
+  // presetKey is an identifier set only once at mount, evaluate immediately to capture
   /* eslint-disable solid/reactivity */
   const [presets, setPresets] = useSyncConfig<StatePresetItem<TValue>[]>(
     `state-preset.${local.presetKey}`,
@@ -147,7 +147,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     }
 
     if (presets().some((p) => p.name === name)) {
-      notification.warning("이름 중복", "같은 이름의 프리셋이 이미 존재합니다.");
+      notification.warning("Duplicate name", "A preset with this name already exists.");
       return;
     }
 
@@ -156,7 +156,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
       state: objClone(local.value),
     };
     setPresets([...presets(), newPreset]);
-    notification.info("프리셋 저장", `"${name}" 프리셋이 저장되었습니다.`);
+    notification.info("Preset saved", `Preset "${name}" has been saved.`);
     setAdding(false);
     setInputValue("");
   }
@@ -177,11 +177,11 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     setPresets(updated);
 
     const notiId = notification.info(
-      "프리셋 덮어쓰기",
-      `"${presetName}" 프리셋이 현재 상태로 업데이트되었습니다.`,
+      "Preset overwritten",
+      `Preset "${presetName}" has been updated with the current state.`,
       {
         action: {
-          label: "실행 취소",
+          label: "Undo",
           onClick: () => {
             setPresets(snapshot);
             notification.remove(notiId);
@@ -198,9 +198,9 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const updated = snapshot.filter((_, i) => i !== index);
     setPresets(updated);
 
-    const notiId = notification.info("프리셋 삭제", `"${presetName}" 프리셋이 삭제되었습니다.`, {
+    const notiId = notification.info("Preset deleted", `Preset "${presetName}" has been deleted.`, {
       action: {
-        label: "실행 취소",
+        label: "Undo",
         onClick: () => {
           setPresets(snapshot);
           notification.remove(notiId);
@@ -242,7 +242,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
         type="button"
         class={resolvedStarBtnClass()}
         onClick={handleStartAdd}
-        title="프리셋 추가"
+        title="Add preset"
       >
         <Icon icon={IconStar} size={iconSize} />
       </button>
@@ -255,7 +255,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={chipNameBtnClass}
               onClick={() => handleRestore(preset)}
-              title={`"${preset.name}" 프리셋 적용`}
+              title={`Apply preset "${preset.name}"`}
             >
               {preset.name}
             </button>
@@ -263,7 +263,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={resolvedIconBtnClass()}
               onClick={() => handleOverwrite(index())}
-              title="현재 상태로 덮어쓰기"
+              title="Overwrite with current state"
             >
               <Icon icon={IconDeviceFloppy} size={iconSize} />
             </button>
@@ -271,7 +271,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={resolvedIconBtnClass()}
               onClick={() => handleDelete(index())}
-              title="프리셋 삭제"
+              title="Delete preset"
             >
               <Icon icon={IconX} size={iconSize} />
             </button>
@@ -288,7 +288,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           }}
           type="text"
           class={resolvedInputClass()}
-          placeholder="이름..."
+          placeholder="Name..."
           autocomplete="one-time-code"
           value={inputValue()}
           onInput={(e) => setInputValue(e.currentTarget.value)}