@simplysm/solid 13.0.71 → 13.0.74

package/src/components/features/data-select-button/DataSelectButton.tsx

@@ -1,4 +1,5 @@
 import {
+  type Component,
   createEffect,
   createMemo,
   createResource,
@@ -15,7 +16,8 @@ import { IconSearch, IconX } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import { Invalid } from "../../form-control/Invalid";
 import { useDialog, type DialogShowOptions } from "../../disclosure/DialogContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import {
@@ -25,11 +27,31 @@ import {
   triggerSizeClasses,
 } from "../../form-control/DropdownTrigger.styles";
 
-/** Result interface returned from modal */
-export interface DataSelectModalResult<TKey> {
+/** Result interface returned from dialog */
+export interface DataSelectDialogResult<TKey> {
   selectedKeys: TKey[];
 }
 
+/** Props automatically injected into dialog component by DataSelectButton/SharedDataSelect */
+export interface InjectedSelectProps {
+  /** Selection mode */
+  selectMode: "single" | "multiple";
+  /** Currently selected keys */
+  selectedKeys: (string | number)[];
+  /** Selection callback — automatically closes dialog with result */
+  onSelect: (result: { keys: (string | number)[] }) => void;
+}
+
+/** Declarative dialog configuration */
+export interface DialogConfig<TUserProps = any> {
+  /** Dialog component (must accept InjectedSelectProps) */
+  component: Component<TUserProps & InjectedSelectProps>;
+  /** User-defined props for the component */
+  props?: TUserProps;
+  /** Dialog options (header, size, etc.) */
+  option?: DialogShowOptions;
+}
+
 /** DataSelectButton Props */
 export interface DataSelectButtonProps<TItem, TKey = string | number> {
   /** Currently selected key(s) (single or multiple) */
@@ -39,8 +61,8 @@ export interface DataSelectButtonProps<TItem, TKey = string | number> {
 
   /** Function to load items by key */
   load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
-  /** Selection modal component factory */
-  modal: () => JSX.Element;
+  /** Selection dialog configuration */
+  dialog: DialogConfig;
   /** Item rendering function */
   renderItem: (item: TItem) => JSX.Element;
 
@@ -59,9 +81,6 @@ export interface DataSelectButtonProps<TItem, TKey = string | number> {
   validate?: (value: unknown) => string | undefined;
   /** touchMode: show error only after focus is lost */
   touchMode?: boolean;
-
-  /** Dialog options */
-  dialogOptions?: DialogShowOptions;
 }
 
 // Styles
@@ -100,7 +119,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "value",
     "onValueChange",
     "load",
-    "modal",
+    "dialog",
     "renderItem",
     "multiple",
     "required",
@@ -109,10 +128,9 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "inset",
     "validate",
     "touchMode",
-    "dialogOptions",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const dialog = useDialog();
 
   // Always normalize value to array
@@ -164,18 +182,30 @@ export function DataSelectButton<TItem, TKey = string | number>(
     const v = getValue();
     if (local.required) {
       const keys = normalizeKeys(v);
-      if (keys.length === 0) return "Required field";
+      if (keys.length === 0) return i18n.t("validation.requiredField");
     }
     return local.validate?.(v);
   });
 
-  // Open modal
-  const handleOpenModal = async () => {
+  // Open dialog
+  const handleOpenDialog = async () => {
     if (local.disabled) return;
 
-    const result = await dialog.show<DataSelectModalResult<TKey>>(
-      local.modal,
-      local.dialogOptions ?? {},
+    const result = await dialog.show<DataSelectDialogResult<TKey>>(
+      () => {
+        const instance = useDialogInstance<DataSelectDialogResult<TKey>>();
+        return (
+          <local.dialog.component
+            {...(local.dialog.props ?? {})}
+            selectMode={local.multiple ? "multiple" : "single"}
+            selectedKeys={normalizeKeys(getValue()) as (string | number)[]}
+            onSelect={(r: { keys: (string | number)[] }) =>
+              instance?.close({ selectedKeys: r.keys as TKey[] })
+            }
+          />
+        );
+      },
+      local.dialog.option ?? {},
     );
 
     if (result) {
@@ -243,7 +273,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
             if (local.disabled) return;
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              void handleOpenModal();
+              void handleOpenDialog();
             }
           }}
         >
@@ -256,7 +286,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
                 class={twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")}
                 onClick={handleClear}
                 tabIndex={-1}
-                aria-label={i18n?.t("dataSelectButton.deselect") ?? "Deselect"}
+                aria-label={i18n.t("dataSelectButton.deselect")}
               >
                 <Icon icon={IconX} size="0.875em" />
               </button>
@@ -266,9 +296,9 @@ export function DataSelectButton<TItem, TKey = string | number>(
                 type="button"
                 data-search-button
                 class={twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")}
-                onClick={() => void handleOpenModal()}
+                onClick={() => void handleOpenDialog()}
                 tabIndex={-1}
-                aria-label={i18n?.t("dataSelectButton.search") ?? "Search"}
+                aria-label={i18n.t("dataSelectButton.search")}
               >
                 <Icon icon={IconSearch} size="0.875em" />
               </button>

package/src/components/features/permission-table/PermissionTable.tsx

@@ -14,7 +14,7 @@ import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
 import type { AppPerm } from "../../../helpers/createAppStructure";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const titleCellClass = clsx("flex items-stretch", "px-2");
 const indentGuideWrapperClass = clsx("mr-1 flex w-3", "justify-center");
@@ -215,7 +215,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     "style",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   // Visible top-level items (preserve object reference)
   const visibleItems = createMemo(() => {
@@ -270,7 +270,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     >
       <DataSheet.Column
         key="title"
-        header={i18n?.t("permissionTable.permissionItem") ?? "Permission Item"}
+        header={i18n.t("permissionTable.permissionItem")}
         sortable={false}
         resizable={false}
       >

package/src/components/features/shared-data/SharedDataSelect.tsx

@@ -1,20 +1,79 @@
-import { createMemo, type JSX, mergeProps, splitProps } from "solid-js";
-import { IconEdit, IconSearch } from "@tabler/icons-solidjs";
+import {
+  children as resolveChildren,
+  type Component,
+  createMemo,
+  For,
+  type JSX,
+  mergeProps,
+  splitProps,
+} from "solid-js";
+import { IconSearch } from "@tabler/icons-solidjs";
 import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDataContext";
 import { Select, type SelectProps } from "../../form-control/select/Select";
 import { Icon } from "../../display/Icon";
 import { useDialog } from "../../disclosure/DialogContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { type ComponentSize } from "../../../styles/tokens.styles";
+import {
+  type DataSelectDialogResult,
+  type DialogConfig,
+} from "../data-select-button/DataSelectButton";
+
+// -- Slot detection --
+const ITEM_TEMPLATE_BRAND = Symbol("SharedDataSelect.ItemTemplate");
+const ACTION_BRAND = Symbol("SharedDataSelect.Action");
+
+interface ItemTemplateDef {
+  __brand: typeof ITEM_TEMPLATE_BRAND;
+  children: (item: any, index: number, depth: number) => JSX.Element;
+}
+
+interface ActionDef {
+  __brand: typeof ACTION_BRAND;
+  children: JSX.Element;
+  onClick?: (e: MouseEvent) => void;
+}
+
+function isItemTemplateDef(v: unknown): v is ItemTemplateDef {
+  return v != null && typeof v === "object" && "__brand" in v && (v as any).__brand === ITEM_TEMPLATE_BRAND;
+}
+
+function isActionDef(v: unknown): v is ActionDef {
+  return v != null && typeof v === "object" && "__brand" in v && (v as any).__brand === ACTION_BRAND;
+}
+
+// -- Compound components --
+const ItemTemplate: Component<{
+  children: (item: any, index: number, depth: number) => JSX.Element;
+}> = (props) => {
+  // eslint-disable-next-line solid/reactivity -- factory function, not reactive JSX
+  return (() => ({
+    __brand: ITEM_TEMPLATE_BRAND,
+    children: props.children,
+  })) as unknown as JSX.Element;
+};
+
+const Action: Component<{
+  children?: JSX.Element;
+  onClick?: (e: MouseEvent) => void;
+}> = (props) => {
+  // eslint-disable-next-line solid/reactivity -- factory function, not reactive JSX
+  return (() => ({
+    __brand: ACTION_BRAND,
+    children: props.children,
+    onClick: props.onClick,
+  })) as unknown as JSX.Element;
+};
 
 /** SharedDataSelect Props */
 export interface SharedDataSelectProps<TItem> {
   /** Shared data accessor */
   data: SharedDataAccessor<TItem>;
 
-  /** Currently selected value */
+  /** Currently selected key value (translated to item internally) */
   value?: unknown;
-  /** Value change callback */
+  /** Value change callback (receives key, not item) */
   onValueChange?: (value: unknown) => void;
   /** Multiple selection mode */
   multiple?: boolean;
@@ -29,21 +88,37 @@ export interface SharedDataSelectProps<TItem> {
 
   /** Item filter function */
   filterFn?: (item: TItem, index: number) => boolean;
-  /** Selection modal component factory */
-  modal?: () => JSX.Element;
-  /** Edit modal component factory */
-  editModal?: () => JSX.Element;
+  /** Selection dialog configuration */
+  dialog?: DialogConfig;
+
+  /** Compound children: ItemTemplate, Action */
+  children: JSX.Element;
+}
 
-  /** Item rendering function */
-  children: (item: TItem, index: number, depth: number) => JSX.Element;
+interface SharedDataSelectComponent {
+  <TItem>(props: SharedDataSelectProps<TItem>): JSX.Element;
+  ItemTemplate: typeof ItemTemplate;
+  Action: typeof Action;
 }
 
-export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JSX.Element {
-  const [local, rest] = splitProps(props, ["data", "filterFn", "modal", "editModal", "children"]);
+const SharedDataSelectBase = <TItem,>(props: SharedDataSelectProps<TItem>): JSX.Element => {
+  const [local, rest] = splitProps(props, [
+    "data", "filterFn", "dialog", "children",
+  ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const dialog = useDialog();
 
+  // Resolve compound children
+  const resolved = resolveChildren(() => local.children);
+  const defs = createMemo(() => {
+    const arr = resolved.toArray();
+    return {
+      itemTemplate: arr.find(isItemTemplateDef) as unknown as ItemTemplateDef | undefined,
+      actions: arr.filter(isActionDef) as unknown as ActionDef[],
+    };
+  });
+
   // Items with filterFn applied
   const items = createMemo(() => {
     const allItems = local.data.items();
@@ -51,21 +126,77 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
     return allItems.filter(local.filterFn);
   });
 
-  // Open modal
-  const handleOpenModal = async () => {
-    if (!local.modal) return;
-    await dialog.show(local.modal, {});
+  // Normalize value to keys array
+  const normalizeKeys = (value: unknown): (string | number)[] => {
+    if (value === undefined || value === null) return [];
+    if (Array.isArray(value)) return value;
+    return [value as string | number];
   };
 
-  // Open edit modal
-  const handleOpenEditModal = async () => {
-    if (!local.editModal) return;
-    await dialog.show(local.editModal, {});
+  // Translate key(s) to item(s) for Select's value prop
+  const keyToItem = (key: string | number): TItem | undefined => {
+    return local.data.get(key);
+  };
+
+  const valueAsItem = createMemo((): TItem | TItem[] | undefined => {
+    const key = rest.value;
+    if (key === undefined || key === null) return undefined;
+    if (Array.isArray(key)) {
+      return key.map((k) => keyToItem(k as string | number)).filter((v): v is TItem => v !== undefined);
+    }
+    return keyToItem(key as string | number);
+  });
+
+  // Translate item back to key for onValueChange callback
+  const itemToKey = (item: TItem | TItem[] | undefined): unknown => {
+    if (item === undefined || item === null) return undefined;
+    if (Array.isArray(item)) return item.map((i) => local.data.getKey(i));
+    return local.data.getKey(item);
+  };
+
+  // Open dialog and handle selection result
+  const handleOpenDialog = async () => {
+    if (!local.dialog) return;
+
+    const dialogConfig = local.dialog;
+    const result = await dialog.show<DataSelectDialogResult<string | number>>(
+      () => {
+        const instance = useDialogInstance<DataSelectDialogResult<string | number>>();
+        return (
+          <dialogConfig.component
+            {...(dialogConfig.props ?? {})}
+            selectMode={rest.multiple ? "multiple" : "single"}
+            selectedKeys={normalizeKeys(rest.value)}
+            onSelect={(r: { keys: (string | number)[] }) =>
+              instance?.close({ selectedKeys: r.keys })
+            }
+          />
+        );
+      },
+      dialogConfig.option ?? {},
+    );
+
+    if (result) {
+      const newKeys = result.selectedKeys;
+      if (rest.multiple) {
+        rest.onValueChange?.(newKeys);
+      } else {
+        rest.onValueChange?.(newKeys.length > 0 ? newKeys[0] : undefined);
+      }
+    }
   };
 
-  // Use mergeProps + as for Select's discriminated union (multiple: true | false?) and TItem → unknown conversion
-  // Wrap with getter to satisfy SolidJS reactivity lint rules
   const selectProps = mergeProps(rest, {
+    get value() {
+      return valueAsItem();
+    },
+    get onValueChange() {
+      if (!rest.onValueChange) return undefined;
+      // eslint-disable-next-line solid/reactivity -- inside getter, tracked scope
+      return (item: TItem | TItem[] | undefined) => {
+        rest.onValueChange!(itemToKey(item));
+      };
+    },
     get items() {
       return items();
     },
@@ -87,17 +218,25 @@ export function SharedDataSelect<TItem>(props: SharedDataSelectProps<TItem>): JS
 
   return (
     <Select {...selectProps}>
-      <Select.ItemTemplate>{local.children}</Select.ItemTemplate>
-      {local.modal && (
-        <Select.Action onClick={() => void handleOpenModal()} aria-label={i18n?.t("sharedDataSelect.search") ?? "Search"}>
-          <Icon icon={IconSearch} />
-        </Select.Action>
+      {defs().itemTemplate && (
+        <Select.ItemTemplate>{defs().itemTemplate!.children}</Select.ItemTemplate>
       )}
-      {local.editModal && (
-        <Select.Action onClick={() => void handleOpenEditModal()} aria-label={i18n?.t("sharedDataSelect.edit") ?? "Edit"}>
-          <Icon icon={IconEdit} />
+      {local.dialog && (
+        <Select.Action onClick={() => void handleOpenDialog()} aria-label={i18n.t("sharedDataSelect.search")}>
+          <Icon icon={IconSearch} />
         </Select.Action>
       )}
+      <For each={defs().actions}>
+        {(action) => (
+          <Select.Action onClick={action.onClick}>
+            {action.children}
+          </Select.Action>
+        )}
+      </For>
     </Select>
   );
-}
+};
+
+export const SharedDataSelect: SharedDataSelectComponent = SharedDataSelectBase as any;
+SharedDataSelect.ItemTemplate = ItemTemplate;
+SharedDataSelect.Action = Action;

package/src/components/features/shared-data/SharedDataSelectButton.tsx

@@ -3,6 +3,7 @@ import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDa
 import {
   DataSelectButton,
   type DataSelectButtonProps,
+  type DialogConfig,
 } from "../data-select-button/DataSelectButton";
 import { type ComponentSize } from "../../../styles/tokens.styles";
 
@@ -26,8 +27,8 @@ export interface SharedDataSelectButtonProps<TItem> {
   /** Borderless style */
   inset?: boolean;
 
-  /** Selection modal component factory */
-  modal: () => JSX.Element;
+  /** Selection dialog configuration */
+  dialog: DialogConfig;
   /** Item rendering function */
   children: (item: TItem) => JSX.Element;
 }

package/src/components/features/shared-data/SharedDataSelectList.tsx

@@ -5,7 +5,7 @@ import { type SharedDataAccessor } from "../../../providers/shared-data/SharedDa
 import { List } from "../../data/list/List";
 import { Pagination } from "../../data/Pagination";
 import { TextInput } from "../../form-control/field/TextInput";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { textMuted } from "../../../styles/tokens.styles";
 import { createSlotSignal } from "../../../hooks/createSlotSignal";
 import {
@@ -77,7 +77,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
     "header",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   // ─── Slot signals ──────────────────────────────────────
 
@@ -203,7 +203,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
             <TextInput
               value={searchText()}
               onValueChange={setSearchText}
-              placeholder={i18n?.t("sharedDataSelectList.searchPlaceholder") ?? "Search..."}
+              placeholder={i18n.t("sharedDataSelectList.searchPlaceholder")}
               class={"w-full"}
             />
           </div>
@@ -231,7 +231,7 @@ export const SharedDataSelectList: SharedDataSelectListComponent = (<TItem,>(
               disabled={local.disabled}
               onClick={() => handleSelect(undefined)}
             >
-              <span class={textMuted}>Unspecified</span>
+              <span class={textMuted}>{i18n.t("sharedDataSelectList.unspecified")}</span>
             </List.Item>
           </Show>
 

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -3,7 +3,7 @@ import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { IconX } from "@tabler/icons-solidjs";
 import { useNotification } from "./NotificationContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { Icon } from "../../display/Icon";
 import { themeTokens } from "../../../styles/tokens.styles";
 
@@ -39,7 +39,7 @@ const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
 
 export const NotificationBanner: Component = () => {
   const notification = useNotification();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const handleDismiss = () => {
     notification.dismissBanner();
@@ -74,7 +74,7 @@ export const NotificationBanner: Component = () => {
               </Show>
               <button
                 type="button"
-                aria-label={i18n?.t("notification.close") ?? "Close notification"}
+                aria-label={i18n.t("notification.close")}
                 class={dismissButtonClass}
                 onClick={handleDismiss}
               >

package/src/components/feedback/notification/NotificationBell.tsx

@@ -7,6 +7,7 @@ import { Dropdown } from "../../disclosure/Dropdown";
 import { Icon } from "../../display/Icon";
 import { NotificationBanner } from "./NotificationBanner";
 import { iconButtonBase } from "../../../styles/patterns.styles";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 export interface NotificationBellProps {
   showBanner?: boolean;
@@ -52,6 +53,7 @@ const itemTimeClass = clsx("mt-1 text-xs", "text-base-400");
 
 export const NotificationBell: Component<NotificationBellProps> = (props) => {
   const notification = useNotification();
+  const i18n = useI18n();
   const [open, setOpen] = createSignal(false);
 
   const handleClear = () => {
@@ -78,7 +80,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
             type="button"
             data-notification-bell
             class={buttonClass}
-            aria-label={`${notification.unreadCount()} notifications`}
+            aria-label={i18n.t("notificationBell.unreadCount", { count: String(notification.unreadCount()) })}
             aria-haspopup="true"
             aria-expanded={open()}
           >
@@ -93,7 +95,7 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
         <Dropdown.Content>
           <div class="w-80 p-2">
             <div class={dropdownHeaderClass}>
-              <span class="font-bold">Notifications</span>
+              <span class="font-bold">{i18n.t("notificationBell.notifications")}</span>
               <Show when={notification.items().length > 0}>
                 <button
                   type="button"
@@ -101,14 +103,14 @@ export const NotificationBell: Component<NotificationBellProps> = (props) => {
                   class={clearButtonClass}
                   onClick={handleClear}
                 >
-                  Clear All
+                  {i18n.t("notificationBell.clearAll")}
                 </button>
               </Show>
             </div>
 
             <Show
               when={notification.items().length > 0}
-              fallback={<div class={emptyClass}>No notifications</div>}
+              fallback={<div class={emptyClass}>{i18n.t("notificationBell.noNotifications")}</div>}
             >
               <div class={listClass}>
                 <For each={[...notification.items()].reverse()}>

package/src/components/feedback/notification/NotificationProvider.tsx

@@ -8,6 +8,7 @@ import {
   type NotificationUpdateOptions,
 } from "./NotificationContext";
 import { useLogger } from "../../../hooks/useLogger";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const MAX_ITEMS = 50;
 
@@ -22,6 +23,7 @@ const MAX_ITEMS = 50;
  */
 export const NotificationProvider: ParentComponent = (props) => {
   const logger = useLogger();
+  const i18n = useI18n();
   const [items, setItems] = createSignal<NotificationItem[]>([]);
   const [dismissedBannerId, setDismissedBannerId] = createSignal<string | null>(null);
 
@@ -158,7 +160,7 @@ export const NotificationProvider: ParentComponent = (props) => {
       {/* Screen reader Live Region */}
       <div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
         <Show when={latestUnread()}>
-          {(item) => `Notification: ${item().title} ${item().message ?? ""}`}
+          {(item) => `${i18n.t("notificationProvider.prefix")} ${item().title} ${item().message ?? ""}`}
         </Show>
       </div>
       {props.children}

package/src/components/form-control/ThemeToggle.tsx

@@ -5,6 +5,7 @@ import { useTheme, type ThemeMode } from "../../providers/ThemeContext";
 import { Icon } from "../display/Icon";
 import { ripple } from "../../directives/ripple";
 import { iconButtonBase } from "../../styles/patterns.styles";
+import { useI18n } from "../../providers/i18n/I18nContext";
 
 void ripple;
 
@@ -18,10 +19,10 @@ const iconSizes: Record<"sm" | "lg", string> = {
   lg: "1.5em",
 };
 
-const modeLabels: Record<ThemeMode, string> = {
-  light: "Light mode",
-  system: "System settings",
-  dark: "Dark mode",
+const modeLabelKeys: Record<ThemeMode, string> = {
+  light: "themeToggle.light",
+  system: "themeToggle.system",
+  dark: "themeToggle.dark",
 };
 
 export interface ThemeToggleProps extends Omit<
@@ -54,6 +55,9 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "size"]);
 
   const { mode, cycleMode } = useTheme();
+  const i18n = useI18n();
+
+  const modeLabel = () => i18n.t(modeLabelKeys[mode()]);
 
   const getClassName = () =>
     twMerge(iconButtonBase, "p-1.5", local.size && sizeClasses[local.size], local.class);
@@ -68,8 +72,8 @@ export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
       type="button"
       class={getClassName()}
       onClick={cycleMode}
-      title={modeLabels[mode()]}
-      aria-label={modeLabels[mode()]}
+      title={modeLabel()}
+      aria-label={modeLabel()}
     >
       <Switch>
         <Match when={mode() === "light"}>

package/src/components/form-control/checkbox/Checkbox.tsx

@@ -4,6 +4,7 @@ import { IconCheck } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { ripple } from "../../../directives/ripple";
 import { Icon } from "../../display/Icon";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import {
   type CheckboxSize,
   checkboxBaseClass,
@@ -51,6 +52,8 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
     "children",
   ]);
 
+  const i18n = useI18n();
+
   const [value, setValue] = createControllableSignal({
     value: () => local.value ?? false,
     onChange: () => local.onValueChange,
@@ -84,7 +87,7 @@ export const Checkbox: ParentComponent<CheckboxProps> = (props) => {
 
   const errorMsg = createMemo(() => {
     const v = local.value ?? false;
-    if (local.required && !v) return "This is a required selection";
+    if (local.required && !v) return i18n.t("validation.requiredSelection");
     return local.validate?.(v);
   });