@simplysm/solid 13.0.72 → 13.0.74

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -26,7 +26,7 @@ import {
   IconClearFormatting,
 } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface EditorToolbarProps {
   editor: Editor;
@@ -63,7 +63,7 @@ const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded
 
 export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   const e = () => props.editor;
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   // Track active state reactively with createEditorTransaction
   const isBold = createEditorTransaction(e, (editor) => editor.isActive("bold"));
@@ -131,7 +131,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isH1)}
-        title={i18n?.t("editorToolbar.heading1") ?? "Heading 1"}
+        title={i18n.t("editorToolbar.heading1")}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()}
       >
         <Icon icon={IconH1} size="1em" />
@@ -139,7 +139,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isH2)}
-        title={i18n?.t("editorToolbar.heading2") ?? "Heading 2"}
+        title={i18n.t("editorToolbar.heading2")}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}
       >
         <Icon icon={IconH2} size="1em" />
@@ -152,7 +152,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isBold)}
-        title={i18n?.t("editorToolbar.bold") ?? "Bold"}
+        title={i18n.t("editorToolbar.bold")}
         onClick={() => props.editor.chain().focus().toggleBold().run()}
       >
         <Icon icon={IconBold} size="1em" />
@@ -160,7 +160,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isItalic)}
-        title={i18n?.t("editorToolbar.italic") ?? "Italic"}
+        title={i18n.t("editorToolbar.italic")}
         onClick={() => props.editor.chain().focus().toggleItalic().run()}
       >
         <Icon icon={IconItalic} size="1em" />
@@ -168,7 +168,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isUnderline)}
-        title={i18n?.t("editorToolbar.underline") ?? "Underline"}
+        title={i18n.t("editorToolbar.underline")}
         onClick={() => props.editor.chain().focus().toggleUnderline().run()}
       >
         <Icon icon={IconUnderline} size="1em" />
@@ -176,7 +176,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isStrike)}
-        title={i18n?.t("editorToolbar.strikethrough") ?? "Strikethrough"}
+        title={i18n.t("editorToolbar.strikethrough")}
         onClick={() => props.editor.chain().focus().toggleStrike().run()}
       >
         <Icon icon={IconStrikethrough} size="1em" />
@@ -186,7 +186,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <div class={separatorClass} />
 
       {/* 5. Text color + background color (using input[type=color]) */}
-      <label class={colorLabelClass} title={i18n?.t("editorToolbar.textColor") ?? "Text color"}>
+      <label class={colorLabelClass} title={i18n.t("editorToolbar.textColor")}>
         <span class={clsx("text-sm font-bold")}>A</span>
         <div class={colorIndicatorClass} style={{ "background-color": currentColor() }} />
         <input
@@ -196,7 +196,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
           onInput={(ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run()}
         />
       </label>
-      <label class={colorLabelClass} title={i18n?.t("editorToolbar.bgColor") ?? "Background color"}>
+      <label class={colorLabelClass} title={i18n.t("editorToolbar.bgColor")}>
         <span
           class={clsx("rounded px-0.5 text-sm font-bold")}
           style={{ "background-color": currentHighlight() }}
@@ -220,7 +220,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isBulletList)}
-        title={i18n?.t("editorToolbar.bulletList") ?? "Bullet list"}
+        title={i18n.t("editorToolbar.bulletList")}
         onClick={() => props.editor.chain().focus().toggleBulletList().run()}
       >
         <Icon icon={IconList} size="1em" />
@@ -228,7 +228,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isOrderedList)}
-        title={i18n?.t("editorToolbar.numberedList") ?? "Numbered list"}
+        title={i18n.t("editorToolbar.numberedList")}
         onClick={() => props.editor.chain().focus().toggleOrderedList().run()}
       >
         <Icon icon={IconListNumbers} size="1em" />
@@ -241,7 +241,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.increaseIndent") ?? "Increase indent"}
+        title={i18n.t("editorToolbar.increaseIndent")}
         onClick={() => props.editor.chain().focus().sinkListItem("listItem").run()}
       >
         <Icon icon={IconIndentIncrease} size="1em" />
@@ -249,7 +249,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.decreaseIndent") ?? "Decrease indent"}
+        title={i18n.t("editorToolbar.decreaseIndent")}
         onClick={() => props.editor.chain().focus().liftListItem("listItem").run()}
       >
         <Icon icon={IconIndentDecrease} size="1em" />
@@ -262,7 +262,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isBlockquote)}
-        title={i18n?.t("editorToolbar.blockquote") ?? "Blockquote"}
+        title={i18n.t("editorToolbar.blockquote")}
         onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
       >
         <Icon icon={IconQuote} size="1em" />
@@ -270,7 +270,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isCodeBlock)}
-        title={i18n?.t("editorToolbar.codeBlock") ?? "Code block"}
+        title={i18n.t("editorToolbar.codeBlock")}
         onClick={() => props.editor.chain().focus().toggleCodeBlock().run()}
       >
         <Icon icon={IconCode} size="1em" />
@@ -283,7 +283,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignLeft)}
-        title={i18n?.t("editorToolbar.alignLeft") ?? "Align left"}
+        title={i18n.t("editorToolbar.alignLeft")}
         onClick={() => props.editor.chain().focus().setTextAlign("left").run()}
       >
         <Icon icon={IconAlignLeft} size="1em" />
@@ -291,7 +291,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignCenter)}
-        title={i18n?.t("editorToolbar.alignCenter") ?? "Align center"}
+        title={i18n.t("editorToolbar.alignCenter")}
         onClick={() => props.editor.chain().focus().setTextAlign("center").run()}
       >
         <Icon icon={IconAlignCenter} size="1em" />
@@ -299,7 +299,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignRight)}
-        title={i18n?.t("editorToolbar.alignRight") ?? "Align right"}
+        title={i18n.t("editorToolbar.alignRight")}
         onClick={() => props.editor.chain().focus().setTextAlign("right").run()}
       >
         <Icon icon={IconAlignRight} size="1em" />
@@ -307,7 +307,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignJustify)}
-        title={i18n?.t("editorToolbar.justify") ?? "Justify"}
+        title={i18n.t("editorToolbar.justify")}
         onClick={() => props.editor.chain().focus().setTextAlign("justify").run()}
       >
         <Icon icon={IconAlignJustified} size="1em" />
@@ -320,7 +320,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.insertTable") ?? "Insert table"}
+        title={i18n.t("editorToolbar.insertTable")}
         onClick={() =>
           props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
         }
@@ -329,7 +329,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       </button>
 
       {/* 16. Insert image */}
-      <button type="button" class={toolbarBtnClass} title={i18n?.t("editorToolbar.insertImage") ?? "Insert image"} onClick={handleImageInsert}>
+      <button type="button" class={toolbarBtnClass} title={i18n.t("editorToolbar.insertImage")} onClick={handleImageInsert}>
         <Icon icon={IconPhoto} size="1em" />
       </button>
 
@@ -340,7 +340,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title={i18n?.t("editorToolbar.clearFormatting") ?? "Clear formatting"}
+        title={i18n.t("editorToolbar.clearFormatting")}
         onClick={() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()}
       >
         <Icon icon={IconClearFormatting} size="1em" />

package/src/components/form-control/field/DatePicker.tsx

@@ -5,6 +5,7 @@ import { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { fieldInputClass, type FieldSize, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 type DatePickerUnit = "year" | "month" | "date";
 
@@ -155,6 +156,8 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // Default unit is date
   const fieldType = () => local.unit ?? "date";
 
@@ -190,12 +193,12 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
       if (local.min !== undefined && v.tick < local.min.tick)
-        return `Must be greater than or equal to ${local.min}`;
+        return i18n.t("validation.minDate", { min: String(local.min) });
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `Must be less than or equal to ${local.max}`;
+        return i18n.t("validation.maxDate", { max: String(local.max) });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/DateTimePicker.tsx

@@ -5,6 +5,7 @@ import { DateTime } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 type DateTimePickerUnit = "minute" | "second";
 
@@ -150,6 +151,8 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // Default unit is minute
   const fieldType = () => local.unit ?? "minute";
 
@@ -188,12 +191,12 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
       if (local.min !== undefined && v.tick < local.min.tick)
-        return `Must be greater than or equal to ${local.min.toFormatString("yyyy-MM-dd HH:mm:ss")}`;
+        return i18n.t("validation.minDate", { min: local.min.toFormatString("yyyy-MM-dd HH:mm:ss") });
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `Must be less than or equal to ${local.max.toFormatString("yyyy-MM-dd HH:mm:ss")}`;
+        return i18n.t("validation.maxDate", { max: local.max.toFormatString("yyyy-MM-dd HH:mm:ss") });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/NumberInput.tsx

@@ -20,6 +20,7 @@ import {
 } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 // NumberInput-specific input style (right-aligned + spinner hidden)
 const numberInputClass = clsx(
@@ -216,6 +217,8 @@ export const NumberInput: NumberInputComponent = (props) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   // Internal string state to track editing state
   const [inputStr, setInputStr] = createSignal<string>("");
   const [isEditing, setIsEditing] = createSignal(false);
@@ -298,10 +301,10 @@ export const NumberInput: NumberInputComponent = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
-      if (local.min !== undefined && v < local.min) return `Minimum value is ${local.min}`;
-      if (local.max !== undefined && v > local.max) return `Maximum value is ${local.max}`;
+      if (local.min !== undefined && v < local.min) return i18n.t("validation.minValue", { min: String(local.min) });
+      if (local.max !== undefined && v > local.max) return i18n.t("validation.maxValue", { max: String(local.max) });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/TextInput.tsx

@@ -13,6 +13,7 @@ import {
 } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 interface TextInputSlotsContextValue {
   setPrefix: (content: SlotAccessor) => void;
@@ -178,6 +179,8 @@ const TextInputInner = (props: TextInputProps) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   // Support controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
@@ -253,14 +256,14 @@ const TextInputInner = (props: TextInputProps) => {
   // Validation error message (check in order, return first failure message)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && !v) return "This is a required field";
+    if (local.required && !v) return i18n.t("validation.required");
     if (v) {
       if (local.minLength != null && v.length < local.minLength)
-        return `Enter at least ${local.minLength} characters`;
+        return i18n.t("validation.minLength", { min: String(local.minLength) });
       if (local.maxLength != null && v.length > local.maxLength)
-        return `Enter up to ${local.maxLength} characters`;
+        return i18n.t("validation.maxLength", { max: String(local.maxLength) });
       if (local.pattern != null && !new RegExp(local.pattern).test(v))
-        return "The input format is invalid";
+        return i18n.t("validation.invalidFormat");
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/Textarea.tsx

@@ -6,6 +6,7 @@ import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface TextareaProps {
   /** Input value */
@@ -98,6 +99,8 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "style",
   ]);
 
+  const i18n = useI18n();
+
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? "",
     onChange: () => local.onValueChange,
@@ -174,12 +177,12 @@ export const Textarea: Component<TextareaProps> = (props) => {
   // Validation error message (check in order, return first failure message)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && !v) return "This is a required field";
+    if (local.required && !v) return i18n.t("validation.required");
     if (v) {
       if (local.minLength != null && v.length < local.minLength)
-        return `Enter at least ${local.minLength} characters`;
+        return i18n.t("validation.minLength", { min: String(local.minLength) });
       if (local.maxLength != null && v.length > local.maxLength)
-        return `Enter up to ${local.maxLength} characters`;
+        return i18n.t("validation.maxLength", { max: String(local.maxLength) });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/field/TimePicker.tsx

@@ -5,6 +5,7 @@ import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
 import { Invalid } from "../../form-control/Invalid";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 type TimePickerUnit = "minute" | "second";
 
@@ -125,6 +126,8 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "touchMode",
   ]);
 
+  const i18n = useI18n();
+
   // Default unit is minute
   const fieldType = () => local.unit ?? "minute";
 
@@ -163,12 +166,12 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
     const v = value();
-    if (local.required && v === undefined) return "This field is required";
+    if (local.required && v === undefined) return i18n.t("validation.required");
     if (v !== undefined) {
       if (local.min !== undefined && v.tick < local.min.tick)
-        return `Must be greater than or equal to ${local.min.toFormatString("HH:mm:ss")}`;
+        return i18n.t("validation.minDate", { min: local.min.toFormatString("HH:mm:ss") });
       if (local.max !== undefined && v.tick > local.max.tick)
-        return `Must be less than or equal to ${local.max.toFormatString("HH:mm:ss")}`;
+        return i18n.t("validation.maxDate", { max: local.max.toFormatString("HH:mm:ss") });
     }
     return local.validate?.(v);
   });

package/src/components/form-control/numpad/Numpad.tsx

@@ -7,6 +7,7 @@ import { NumberInput } from "../field/NumberInput";
 import { Icon } from "../../display/Icon";
 import { IconEraser, IconArrowLeft } from "@tabler/icons-solidjs";
 import type { ComponentSize } from "../../../styles/tokens.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface NumpadProps {
   /** Input value */
@@ -54,6 +55,7 @@ function valueToInputStr(value: number | undefined): string {
 }
 
 export const Numpad: Component<NumpadProps> = (props) => {
+  const i18n = useI18n();
   // Controlled/uncontrolled pattern
   const [value, setValue] = createControllableSignal({
     value: () => props.value,
@@ -151,7 +153,7 @@ export const Numpad: Component<NumpadProps> = (props) => {
           disabled={props.required && value() == null}
           onClick={handleEnter}
         >
-          ENT
+          {i18n.t("numpad.enter")}
         </Button>
       </Show>
 

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

@@ -31,7 +31,7 @@ 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";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 void ripple;
 
@@ -264,7 +264,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
     "getIsHidden",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const [open, setOpen] = createSignal(false);
 
   // Search text signal
@@ -349,7 +349,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
   const errorMsg = createMemo(() => {
     const v = value();
     if (local.required && (v === undefined || v === null || v === ""))
-      return "This is a required field";
+      return i18n.t("validation.required");
     return local.validate?.(v);
   });
 
@@ -536,7 +536,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
               <TextInput
                 value={searchText()}
                 onValueChange={setSearchText}
-                placeholder={i18n?.t("select.searchPlaceholder") ?? "Search..."}
+                placeholder={i18n.t("select.searchPlaceholder")}
                 class={searchInputClass}
               />
             </Show>
@@ -549,7 +549,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                   class={selectAllBtnClass}
                   onClick={handleSelectAll}
                 >
-                  {i18n?.t("select.selectAll") ?? "Select all"}
+                  {i18n.t("select.selectAll")}
                 </button>
                 <button
                   type="button"
@@ -557,7 +557,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                   class={selectAllBtnClass}
                   onClick={handleDeselectAll}
                 >
-                  {i18n?.t("select.deselectAll") ?? "Deselect all"}
+                  {i18n.t("select.deselectAll")}
                 </button>
               </div>
             </Show>
@@ -566,7 +566,7 @@ export const Select: SelectComponent = <T,>(props: SelectProps<T>) => {
                 {/* Unset item */}
                 <Show when={showUnsetItem()}>
                   <SelectItem value={undefined as T}>
-                    <span class={textMuted}>{i18n?.t("select.unset") ?? "Unset"}</span>
+                    <span class={textMuted}>{i18n.t("select.unset")}</span>
                   </SelectItem>
                 </Show>
                 {renderItems(visibleItems() ?? [], 0)}

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

@@ -8,6 +8,7 @@ import { useSyncConfig } from "../../../hooks/useSyncConfig";
 import { useNotification } from "../../feedback/notification/NotificationContext";
 import { Icon } from "../../display/Icon";
 import { textPlaceholder } from "../../../styles/tokens.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import type { ComponentSize } from "../../../styles/tokens.styles";
 import { iconButtonBase } from "../../../styles/patterns.styles";
 
@@ -116,6 +117,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
   ]);
 
   const notification = useNotification();
+  const i18n = useI18n();
 
   // presetKey is an identifier set only once at mount, evaluate immediately to capture
   /* eslint-disable solid/reactivity */
@@ -147,7 +149,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     }
 
     if (presets().some((p) => p.name === name)) {
-      notification.warning("Duplicate name", "A preset with this name already exists.");
+      notification.warning(i18n.t("statePreset.duplicateName"), i18n.t("statePreset.duplicateMessage"));
       return;
     }
 
@@ -156,7 +158,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
       state: objClone(local.value),
     };
     setPresets([...presets(), newPreset]);
-    notification.info("Preset saved", `Preset "${name}" has been saved.`);
+    notification.info(i18n.t("statePreset.saved"), i18n.t("statePreset.savedMessage", { name }));
     setAdding(false);
     setInputValue("");
   }
@@ -177,11 +179,11 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     setPresets(updated);
 
     const notiId = notification.info(
-      "Preset overwritten",
-      `Preset "${presetName}" has been updated with the current state.`,
+      i18n.t("statePreset.overwritten"),
+      i18n.t("statePreset.overwrittenMessage", { name: presetName }),
       {
         action: {
-          label: "Undo",
+          label: i18n.t("statePreset.undo"),
           onClick: () => {
             setPresets(snapshot);
             notification.remove(notiId);
@@ -198,9 +200,9 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
     const updated = snapshot.filter((_, i) => i !== index);
     setPresets(updated);
 
-    const notiId = notification.info("Preset deleted", `Preset "${presetName}" has been deleted.`, {
+    const notiId = notification.info(i18n.t("statePreset.deleted"), i18n.t("statePreset.deletedMessage", { name: presetName }), {
       action: {
-        label: "Undo",
+        label: i18n.t("statePreset.undo"),
         onClick: () => {
           setPresets(snapshot);
           notification.remove(notiId);
@@ -242,7 +244,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
         type="button"
         class={resolvedStarBtnClass()}
         onClick={handleStartAdd}
-        title="Add preset"
+        title={i18n.t("statePreset.addPreset")}
       >
         <Icon icon={IconStar} size={iconSize} />
       </button>
@@ -255,7 +257,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={chipNameBtnClass}
               onClick={() => handleRestore(preset)}
-              title={`Apply preset "${preset.name}"`}
+              title={preset.name}
             >
               {preset.name}
             </button>
@@ -263,7 +265,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={resolvedIconBtnClass()}
               onClick={() => handleOverwrite(index())}
-              title="Overwrite with current state"
+              title={i18n.t("statePreset.overwrite")}
             >
               <Icon icon={IconDeviceFloppy} size={iconSize} />
             </button>
@@ -271,7 +273,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
               type="button"
               class={resolvedIconBtnClass()}
               onClick={() => handleDelete(index())}
-              title="Delete preset"
+              title={i18n.t("statePreset.deletePreset")}
             >
               <Icon icon={IconX} size={iconSize} />
             </button>
@@ -288,7 +290,7 @@ function StatePresetInner<TValue>(props: StatePresetProps<TValue>): JSX.Element
           }}
           type="text"
           class={resolvedInputClass()}
-          placeholder="Name..."
+          placeholder={i18n.t("statePreset.namePlaceholder")}
           autocomplete="one-time-code"
           value={inputValue()}
           onInput={(e) => setInputValue(e.currentTarget.value)}

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -12,7 +12,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
 import { mergeStyles } from "../../../helpers/mergeStyles";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const backdropClass = clsx(
   "absolute",
@@ -62,7 +62,7 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
 export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style"]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const [toggle, setToggle] = createSignal(false);
 
   // Detect Tailwind sm: breakpoint
@@ -113,7 +113,7 @@ export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props)
             onClick={handleBackdropClick}
             onKeyDown={(e) => e.key === "Escape" && handleBackdropClick()}
             role="button"
-            aria-label={i18n?.t("sidebar.closeSidebar") ?? "Close sidebar"}
+            aria-label={i18n.t("sidebar.closeSidebar")}
             tabIndex={0}
           />
         </Show>

package/src/components/layout/sidebar/SidebarMenu.tsx

@@ -19,6 +19,7 @@ import type { AppMenu } from "../../../helpers/createAppStructure";
 import { Icon } from "../../display/Icon";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const headerClass = clsx(
   "px-4",
@@ -72,6 +73,7 @@ const MenuContext = createContext<MenuContextValue>();
  */
 export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
+  const i18n = useI18n();
 
   const location = useLocation();
 
@@ -107,7 +109,7 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
   return (
     <MenuContext.Provider value={{ initialOpenItems }}>
       <div {...rest} data-sidebar-menu class={getClassName()}>
-        <div class={headerClass}>MENU</div>
+        <div class={headerClass}>{i18n.t("sidebarMenu.menu")}</div>
         <List inset>
           <For each={local.menus}>{(menu) => <MenuItem menu={menu} size="lg" />}</For>
         </List>