@kashi-ui/elements 0.26.0 → 1.1.0

package/README.md

@@ -26,6 +26,15 @@ import "@kashi-ui/css";
 import "@kashi-ui/elements";
 ```
 
+## زبان انگلیسی
+
+```ts
+import { setLocale } from "@kashi-ui/elements";
+setLocale("en"); // پیش از ساخته شدن عنصرها
+```
+
+راهنما: https://kashi.sepantapouya.com/docs/i18n/
+
 ## عنصرها
 
 - **فیلدهای فارسی:** `kashi-national-id`، `kashi-legal-id`، `kashi-mobile`، `kashi-landline`، `kashi-card-number`، `kashi-iban`، `kashi-postal-code`، `kashi-price`

package/dist/appointment.js

@@ -1,6 +1,6 @@
-import { JALALI_MONTHS, WEEKDAYS, formatJalali, formatTime, fromISODate, getIranHoliday, parseTime, toFaDigits, toISODate, toJalali } from "@kashi-ui/persian";
-import { HTMLBase, define, emit, esc, uid } from "./base.js";
-const PERIODS = [["صبح", 12], ["بعدازظهر", 17], ["عصر", 24]];
+import { formatJalali, formatTime, fromISODate, getIranHoliday, parseTime, toFaDigits, toISODate, toJalali } from "@kashi-ui/persian";
+import { calendarNames, define, digitsOf, emit, esc, HTMLBase, lang, msg, uid } from "./base.js";
+const PERIODS = [["morning", 12], ["afternoon", 17], ["evening", 24]];
 const day = (d, add = 0) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + add);
 const same = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 const minutes = (t) => {
@@ -70,7 +70,7 @@ export class KashiAppointmentPicker extends HTMLBase {
         const closedAttr = this.getAttribute("closed") !== "false";
         return Array.from({ length: count }, (_, i) => {
             const d = day(start, i);
-            const closed = this.isClosed ? this.isClosed(d) : closedAttr && !!getIranHoliday(d);
+            const closed = this.isClosed ? this.isClosed(d) : closedAttr && !!getIranHoliday(d, { locale: lang() });
             let slots = [];
             if (!closed) {
                 if (this.getSlots)
@@ -92,7 +92,7 @@ export class KashiAppointmentPicker extends HTMLBase {
     }
     render(focus = null) {
         const now = new Date();
-        const fa = this.getAttribute("digits") !== "latin";
+        const fa = digitsOf(this) === "fa";
         const n = (v) => (fa ? toFaDigits(String(v)) : String(v));
         const digits = fa ? "fa" : "latin";
         const list = this.list();
@@ -101,27 +101,28 @@ export class KashiAppointmentPicker extends HTMLBase {
             this.active = i >= 0 ? i : Math.max(0, list.findIndex((x) => x.free > 0));
         }
         const cur = list[this.active];
-        const label = this.getAttribute("label") ?? "انتخاب نوبت";
-        const wd = (d) => (same(d, now) ? "امروز" : same(d, day(now, 1)) ? "فردا" : WEEKDAYS[(d.getDay() + 1) % 7]);
+        const M = msg(), A = M.appointment, { months, weekdays } = calendarNames(), locale = lang();
+        const label = this.getAttribute("label") ?? A.label;
+        const wd = (d) => (same(d, now) ? M.common.today : same(d, day(now, 1)) ? M.common.tomorrow : weekdays[(d.getDay() + 1) % 7]);
         const daysHtml = list.map((x, i) => {
             const { jm, jd } = toJalali(x.date);
-            const status = x.closed ? "تعطیل" : x.free ? `${n(x.free)} نوبت خالی` : "نوبت خالی ندارد";
-            return `<button type="button" role="radio" data-i="${i}" class="k-appt__day" aria-checked="${i === this.active}" tabindex="${i === this.active ? 0 : -1}"${x.closed ? " disabled" : ""} aria-label="${esc(`${formatJalali(x.date, { style: "full", digits })}، ${status}`)}"><span class="k-appt__weekday" aria-hidden="true">${wd(x.date)}</span><span class="k-appt__date" aria-hidden="true">${n(jd)}</span><span class="k-appt__month" aria-hidden="true">${JALALI_MONTHS[jm - 1]}</span><span class="k-appt__free" aria-hidden="true">${x.closed ? "تعطیل" : x.free ? `${n(x.free)} نوبت` : "پر"}</span></button>`;
+            const status = x.closed ? A.closed : x.free ? A.freeLong(n(x.free)) : A.none;
+            return `<button type="button" role="radio" data-i="${i}" class="k-appt__day" aria-checked="${i === this.active}" tabindex="${i === this.active ? 0 : -1}"${x.closed ? " disabled" : ""} aria-label="${esc(`${formatJalali(x.date, { style: "full", digits, locale })}${M.common.list}${status}`)}"><span class="k-appt__weekday" aria-hidden="true">${wd(x.date)}</span><span class="k-appt__date" aria-hidden="true">${n(jd)}</span><span class="k-appt__month" aria-hidden="true">${months[jm - 1]}</span><span class="k-appt__free" aria-hidden="true">${x.closed ? A.closed : x.free ? A.free(n(x.free)) : A.full}</span></button>`;
         }).join("");
         const selDay = !!this.selected && same(this.selected.date, cur.date);
         const focusTime = selDay ? this.selected.time : cur.slots.find((s) => s.available)?.time;
         const slotsHtml = cur.closed || !cur.free
-            ? `<p class="k-appt__empty">${cur.closed ? "این روز تعطیل است." : "نوبت خالی برای این روز نمانده است؛ روز دیگری را انتخاب کنید."}</p>`
+            ? `<p class="k-appt__empty">${cur.closed ? A.closedDay : A.noSlots}</p>`
             : PERIODS.map(([title, until], k) => {
                 const slots = cur.slots.filter((s) => minutes(s.time) / 60 < until && minutes(s.time) / 60 >= (k ? PERIODS[k - 1][1] : 0));
                 if (!slots.length)
                     return "";
                 const gid = `${this.key}-p${k}`;
-                return `<div class="k-appt__group"><p class="k-appt__period" id="${gid}">${title}</p><div class="k-appt__times" role="radiogroup" aria-labelledby="${gid}">${slots.map((s) => `<button type="button" role="radio" class="k-appt__time" data-time="${s.time}" aria-checked="${selDay && this.selected.time === s.time}" tabindex="${s.time === focusTime ? 0 : -1}"${s.available ? "" : " disabled"} aria-label="ساعت ${n(s.time)}${s.available ? "" : "، پر"}">${n(s.time)}</button>`).join("")}</div></div>`;
+                return `<div class="k-appt__group"><p class="k-appt__period" id="${gid}">${A[title]}</p><div class="k-appt__times" role="radiogroup" aria-labelledby="${gid}">${slots.map((s) => `<button type="button" role="radio" class="k-appt__time" data-time="${s.time}" aria-checked="${selDay && this.selected.time === s.time}" tabindex="${s.time === focusTime ? 0 : -1}"${s.available ? "" : " disabled"} aria-label="${esc(A.time(n(s.time)))}${s.available ? "" : esc(A.booked)}">${n(s.time)}</button>`).join("")}</div></div>`;
             }).join("");
         const name = this.getAttribute("name");
         const sel = this.selected;
-        this.innerHTML = `<div class="k-appt" role="group" aria-labelledby="${this.key}-label"><p class="k-label" id="${this.key}-label" style="margin: 0">${esc(label)}</p><div class="k-appt__days" role="radiogroup" aria-label="روز">${daysHtml}</div><div class="k-appt__slots">${slotsHtml}</div><p class="k-appt__summary" aria-live="polite">${sel ? `${CLOCK}<span>نوبت شما: <strong>${formatJalali(sel.date, { style: "full", digits })}، ساعت ${n(sel.time)}</strong></span>` : ""}</p>${name ? `<input type="hidden" name="${esc(`${name}_date`)}" value="${sel ? toISODate(sel.date) : ""}"><input type="hidden" name="${esc(`${name}_time`)}" value="${sel?.time ?? ""}">` : ""}</div>`;
+        this.innerHTML = `<div class="k-appt" role="group" aria-labelledby="${this.key}-label"><p class="k-label" id="${this.key}-label" style="margin: 0">${esc(label)}</p><div class="k-appt__days" role="radiogroup" aria-label="${esc(A.day)}">${daysHtml}</div><div class="k-appt__slots">${slotsHtml}</div><p class="k-appt__summary" aria-live="polite">${sel ? `${CLOCK}<span>${esc(A.yours)} <strong>${esc(A.at(formatJalali(sel.date, { style: "full", digits, locale }), n(sel.time)))}</strong></span>` : ""}</p>${name ? `<input type="hidden" name="${esc(`${name}_date`)}" value="${sel ? toISODate(sel.date) : ""}"><input type="hidden" name="${esc(`${name}_time`)}" value="${sel?.time ?? ""}">` : ""}</div>`;
         this.rendered = true;
         const days = this.querySelector(".k-appt__days");
         const times = this.querySelector(".k-appt__slots");

package/dist/base.d.ts

@@ -1,3 +1,4 @@
+import { type KashiLocale, type KashiMessagesInput } from "@kashi-ui/persian";
 /** در Node.js (رندر سمت سرور) HTMLElement وجود ندارد؛ import کردن پکیج نباید خطا بدهد */
 export declare const HTMLBase: typeof HTMLElement;
 /** ثبت عنصر، فقط در مرورگر و فقط یک بار (اگر پکیج دو بار بارگذاری شود خطا نمی‌دهد) */
@@ -7,6 +8,412 @@ export declare function define(tag: string, ctor: CustomElementConstructor, disp
  * اگر اسکریپت بدون type="module" در <head> باشد، عنصر پیش از فرزندانش به صفحه وصل می‌شود.
  */
 export declare function afterParse(cb: () => void): void;
+type Digits = "fa" | "latin";
+/**
+ * زبان متن‌های داخلی همهٔ عنصرها: setLocale("en") برچسب دکمه‌ها، متن صفحه‌خوان، پیام‌های خطا، نام ماه‌ها و ارقام را انگلیسی می‌کند.
+ * پیش از ساخته شدن عنصرها صدا بزنید (بالای صفحه، بعد از import). با messages هر متنی را عوض کنید.
+ */
+export declare function setLocale(locale: KashiLocale, { messages, digits }?: {
+    messages?: KashiMessagesInput;
+    digits?: Digits;
+}): void;
+/** ارقام پیش‌فرض زبان فعلی */
+export declare const localeDigits: () => Digits;
+/** فرهنگ متن‌های فعلی */
+export declare const msg: () => {
+    common: {
+        close: string;
+        loading: string;
+        optional: string;
+        remove: (item: string) => string;
+        removeShort: string;
+        clear: string;
+        clearAll: string;
+        cancel: string;
+        confirm: string;
+        save: string;
+        edit: string;
+        prev: string;
+        next: string;
+        today: string;
+        tomorrow: string;
+        noResults: string;
+        searching: string;
+        results: (n: string) => string;
+        added: (item: string) => string;
+        removed: (item: string) => string;
+        selected: (item: string) => string;
+        max: (n: string) => string;
+        total: string;
+        other: string;
+        of: (a: string, b: string) => string;
+        and: string;
+        list: string;
+        range: string;
+        percent: (n: string) => string;
+        decimal: string;
+    };
+    money: {
+        toman: string;
+        rial: string;
+        positive: string;
+    };
+    alert: {
+        close: string;
+    };
+    banner: {
+        label: string;
+        close: string;
+    };
+    avatar: {
+        online: string;
+        offline: string;
+        busy: string;
+        away: string;
+        more: (n: string) => string;
+    };
+    bankCard: {
+        card: string;
+        cardOf: (bank: string) => string;
+        bank: string;
+        endingIn: (last4: string) => string;
+        expiry: string;
+    };
+    breadcrumb: {
+        label: string;
+        expand: string;
+    };
+    calendar: {
+        label: string;
+        prevMonth: string;
+        nextMonth: string;
+        month: string;
+        year: string;
+        holiday: string;
+    };
+    carousel: {
+        slider: string;
+        slide: string;
+        slideOf: (n: string, total: string) => string;
+        slides: (label: string) => string;
+    };
+    chart: {
+        period: string;
+        value: string;
+        share: string;
+        count: string;
+        keyboard: (title: string) => string;
+        thousand: string;
+        million: string;
+        billion: string;
+    };
+    city: {
+        label: string;
+        outside: string;
+        custom: string;
+        search: string;
+        hint: string;
+    };
+    province: {
+        label: string;
+        search: string;
+        capital: (c: string) => string;
+    };
+    colorPicker: {
+        label: string;
+        custom: string;
+        area: string;
+        areaValue: (s: string, v: string) => string;
+        eyedropper: string;
+        hue: string;
+        degrees: (n: string) => string;
+        red: string;
+        green: string;
+        blue: string;
+        invalid: string;
+        swatches: string;
+        sample: string;
+        contrast: (ink: "white" | "black", ratio: string, pass: boolean) => string;
+        names: {
+            firoozeh: string;
+            lajvard: string;
+            violet: string;
+            anar: string;
+            zafaran: string;
+            peste: string;
+            shab: string;
+        };
+    };
+    combobox: {
+        toggle: string;
+        more: (n: string) => string;
+    };
+    otp: {
+        label: string;
+    };
+    command: {
+        placeholder: string;
+        empty: string;
+        title: string;
+        navigate: string;
+        select: string;
+    };
+    contextMenu: {
+        label: string;
+        hint: string;
+    };
+    copy: {
+        copy: string;
+        copied: string;
+        failed: string;
+    };
+    countdown: {
+        days: string;
+        hours: string;
+        minutes: string;
+        seconds: string;
+        left: string;
+    };
+    table: {
+        selectAll: string;
+        selectRow: string;
+        selectNamed: (row: string) => string;
+        empty: string;
+        sort: (col: string) => string;
+        search: string;
+        rows: (n: string) => string;
+    };
+    datePicker: {
+        label: string;
+        invalid: string;
+        open: string;
+    };
+    dateRange: {
+        label: string;
+        placeholder: string;
+        presets: string;
+        pickEnd: string;
+        last7: (n: string) => string;
+        last30: (n: string) => string;
+        thisMonth: string;
+        lastMonth: string;
+    };
+    monthPicker: {
+        label: string;
+        prevYear: string;
+        nextYear: string;
+    };
+    fileUpload: {
+        units: string[];
+        browse: string;
+        drop: string;
+        tooBig: (max: string) => string;
+        wrongType: string;
+        tooMany: (n: string) => string;
+        done: string;
+        uploading: string;
+        uploadingFile: (name: string) => string;
+        error: string;
+    };
+    input: {
+        clear: string;
+        show: string;
+        hide: string;
+        checking: string;
+    };
+    invalid: {
+        card: string;
+        iban: string;
+        nationalId: string;
+        legalId: string;
+        mobile: string;
+        landline: string;
+        postal: string;
+        plate: string;
+        time: string;
+        timeRange: (a: string, b: string) => string;
+        priceMin: (n: string) => string;
+        priceMax: (n: string) => string;
+        priceRange: (a: string, b: string) => string;
+    };
+    inlineEdit: {
+        empty: string;
+        failed: string;
+    };
+    iranMap: {
+        label: string;
+        tableNote: string;
+        onMap: (label: string) => string;
+    };
+    keyboardFix: {
+        before: string;
+        after: string;
+    };
+    meter: {
+        ok: string;
+        warning: string;
+        critical: string;
+    };
+    multiSelect: {
+        label: string;
+        selected: (n: string) => string;
+        clearedAll: string;
+    };
+    numberInput: {
+        label: string;
+        increment: string;
+        decrement: string;
+    };
+    pagination: {
+        nav: string;
+        page: (n: string) => string;
+        perPage: string;
+        jump: string;
+        jumpRange: (jump: string, a: string, b: string) => string;
+    };
+    password: {
+        title: string;
+        strength: (level: string) => string;
+        levels: string[];
+        persian: string;
+        length: (n: string) => string;
+        cases: string;
+        digit: string;
+        symbol: string;
+        met: string;
+        unmet: string;
+    };
+    receipt: {
+        success: string;
+        failed: string;
+        pending: string;
+        merchant: string;
+        tracking: string;
+        copyTracking: string;
+        reference: string;
+        card: string;
+        date: string;
+        at: (time: string) => string;
+    };
+    persianInput: {
+        text: string;
+        "national-id": string;
+        "legal-id": string;
+        mobile: string;
+        landline: string;
+        card: string;
+        iban: string;
+        price: string;
+        postal: string;
+        time: string;
+        plate: string;
+    };
+    textFix: {
+        fix: string;
+        clean: string;
+        count: (n: string, summary: string) => string;
+        arabic: string;
+        zwnj: string;
+        punctuation: string;
+        digits: string;
+        spacing: string;
+    };
+    plate: {
+        label: string;
+        first: string;
+        letter: string;
+        middle: string;
+        region: string;
+        iran: string;
+    };
+    rating: {
+        label: string;
+    };
+    sideNav: {
+        label: string;
+    };
+    slider: {
+        from: string;
+        to: string;
+    };
+    splitter: {
+        label: string;
+    };
+    stat: {
+        up: string;
+        down: string;
+        flat: string;
+    };
+    stepper: {
+        label: string;
+        complete: string;
+        current: string;
+    };
+    tagInput: {
+        label: string;
+        duplicate: string;
+    };
+    toast: {
+        region: string;
+        close: string;
+    };
+    tour: {
+        done: string;
+        skip: string;
+        step: (n: string, total: string) => string;
+    };
+    heatmap: {
+        unit: string;
+        weekdays: string[];
+        inYear: (unit: string, year: string) => string;
+        total: (n: string, unit: string, year: string) => string;
+        less: string;
+        more: string;
+        byMonth: (name: string) => string;
+    };
+    appointment: {
+        label: string;
+        day: string;
+        morning: string;
+        afternoon: string;
+        evening: string;
+        closed: string;
+        full: string;
+        free: (n: string) => string;
+        freeLong: (n: string) => string;
+        none: string;
+        closedDay: string;
+        noSlots: string;
+        time: (t: string) => string;
+        booked: string;
+        yours: string;
+        at: (date: string, time: string) => string;
+    };
+    address: {
+        legend: string;
+        province: string;
+        city: string;
+        street: string;
+        plaque: string;
+        unit: string;
+        postalCode: string;
+        provinceSearch: string;
+        streetHint: string;
+    };
+};
+/** زبان فعلی */
+export declare const lang: () => KashiLocale;
+/** ارقام عنصر: ویژگی digits، وگرنه پیش‌فرض زبان */
+export declare const digitsOf: (el: Element) => Digits;
+/** عدد با ارقام همان عنصر */
+export declare const num: (el: Element, v: number | string) => string;
+/** نام ماه‌ها و روزهای شمسی به زبان فعلی */
+export declare const calendarNames: () => {
+    months: readonly ["Farvardin", "Ordibehesht", "Khordad", "Tir", "Mordad", "Shahrivar", "Mehr", "Aban", "Azar", "Dey", "Bahman", "Esfand"] | readonly ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"];
+    weekdays: readonly ["Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"] | readonly ["شنبه", "یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنجشنبه", "جمعه"];
+    weekdaysShort: readonly ["Sa", "Su", "Mo", "Tu", "We", "Th", "Fr"] | readonly ["ش", "ی", "د", "س", "چ", "پ", "ج"];
+    friday: string;
+};
 /** شناسهٔ یکتا برای اتصال برچسب، راهنما و خطا */
 export declare const uid: (prefix: string) => string;
 /** متن امن برای قرار دادن در HTML */
@@ -45,3 +452,4 @@ export declare function fieldHTML({ id, label, required, optional, control }: Fi
 export declare function setMessages(field: Element, control: HTMLElement, id: string, error: string | null, hint: string | null, extra?: string | null): void;
 /** فیلد پنهان برای ارسال مقدار خام در فرم HTML معمولی */
 export declare function syncHidden(host: Element, name: string | null, value: string): void;
+export {};

package/dist/base.js

@@ -1,4 +1,5 @@
 // پایهٔ مشترک وب کامپوننت‌ها: بدون Shadow DOM، تا کلاس‌های k-* از @kashi-ui/css و تم کاربر مستقیم اعمال شوند.
+import { JALALI_MONTHS, JALALI_MONTHS_EN, WEEKDAYS, WEEKDAYS_EN, WEEKDAYS_SHORT, WEEKDAYS_SHORT_EN, faMessages, getMessages, toFaDigits, } from "@kashi-ui/persian";
 /** در Node.js (رندر سمت سرور) HTMLElement وجود ندارد؛ import کردن پکیج نباید خطا بدهد */
 export const HTMLBase = typeof HTMLElement === "undefined" ? class {
 } : HTMLElement;
@@ -64,6 +65,34 @@ export function afterParse(cb) {
     else
         cb();
 }
+const LOCALE = { locale: "fa", messages: faMessages, digits: "fa" };
+/**
+ * زبان متن‌های داخلی همهٔ عنصرها: setLocale("en") برچسب دکمه‌ها، متن صفحه‌خوان، پیام‌های خطا، نام ماه‌ها و ارقام را انگلیسی می‌کند.
+ * پیش از ساخته شدن عنصرها صدا بزنید (بالای صفحه، بعد از import). با messages هر متنی را عوض کنید.
+ */
+export function setLocale(locale, { messages, digits } = {}) {
+    LOCALE.locale = locale;
+    LOCALE.messages = getMessages(locale, messages);
+    LOCALE.digits = digits ?? (locale === "en" ? "latin" : "fa");
+}
+/** ارقام پیش‌فرض زبان فعلی */
+export const localeDigits = () => LOCALE.digits;
+/** فرهنگ متن‌های فعلی */
+export const msg = () => LOCALE.messages;
+/** زبان فعلی */
+export const lang = () => LOCALE.locale;
+/** ارقام عنصر: ویژگی digits، وگرنه پیش‌فرض زبان */
+export const digitsOf = (el) => {
+    const a = el.getAttribute("digits");
+    return a === "latin" || a === "fa" ? a : LOCALE.digits;
+};
+/** عدد با ارقام همان عنصر */
+export const num = (el, v) => (digitsOf(el) === "fa" ? toFaDigits(String(v)) : String(v));
+/** نام ماه‌ها و روزهای شمسی به زبان فعلی */
+export const calendarNames = () => {
+    const en = LOCALE.locale === "en";
+    return { months: en ? JALALI_MONTHS_EN : JALALI_MONTHS, weekdays: en ? WEEKDAYS_EN : WEEKDAYS, weekdaysShort: en ? WEEKDAYS_SHORT_EN : WEEKDAYS_SHORT, friday: en ? "Friday" : "جمعه" };
+};
 let counter = 0;
 /** شناسهٔ یکتا برای اتصال برچسب، راهنما و خطا */
 export const uid = (prefix) => `${prefix}-${(++counter).toString(36)}`;

package/dist/basic.js

@@ -1,5 +1,4 @@
-import { toFaDigits } from "@kashi-ui/persian";
-import { HTMLBase, ICONS, afterParse, bool, define, emit, esc, fieldHTML, setMessages, uid } from "./base.js";
+import { afterParse, bool, define, emit, esc, fieldHTML, HTMLBase, ICONS, msg, num, setMessages, uid } from "./base.js";
 const EYE = (off) => `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.8 10S4.8 4.5 10 4.5 18.2 10 18.2 10 15.2 15.5 10 15.5 1.8 10 1.8 10Z"/><circle cx="10" cy="10" r="2.5"/>${off ? '<path d="m3 3 14 14"/>' : ""}</svg>`;
 const X = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><path d="m6 6 8 8M14 6l-8 8"/></svg>';
 /** ویژگی‌هایی که مستقیم روی input یا textarea داخلی می‌روند */
@@ -62,7 +61,7 @@ export class KashiInput extends HTMLBase {
         const box = `<div class="k-input${this.multiline ? " k-input--textarea" : ""}${bool(this, "autoresize") ? " k-input--autoresize" : ""}${size === "sm" || size === "lg" ? ` k-input--${size}` : ""}" data-size="${size ?? "md"}"${disabled ? ' data-state="disabled"' : ""}>${control}<span class="k-input__end"></span></div>`;
         const optional = this.getAttribute("optional");
         this.querySelector(":scope > .k-field")?.remove();
-        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, required: this.hasAttribute("required"), optional: optional === null ? null : optional || "اختیاری", control: box }));
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, required: this.hasAttribute("required"), optional: optional === null ? null : optional || msg().common.optional, control: box }));
         this.control = this.querySelector(".k-input__control");
         this.control.value = this.text;
         this.control.addEventListener("input", () => {
@@ -97,9 +96,9 @@ export class KashiInput extends HTMLBase {
         const end = this.querySelector(".k-input__end");
         const password = !this.multiline && this.getAttribute("type") === "password" && this.getAttribute("revealable") !== "false";
         end.innerHTML = [
-            bool(this, "loading") ? '<span class="k-input__addon"><span class="k-spinner k-spinner--sm" role="status" aria-label="در حال بررسی"></span></span>' : "",
-            bool(this, "clearable") && len > 0 && !off ? `<button type="button" class="k-input__action" data-act="clear" aria-label="پاک کردن">${X}</button>` : "",
-            password ? `<button type="button" class="k-input__action" data-act="reveal" aria-label="${this.revealed ? "پنهان کردن رمز" : "نمایش رمز"}" aria-pressed="${this.revealed}">${EYE(this.revealed)}</button>` : "",
+            bool(this, "loading") ? '<span class="k-input__addon"><span class="k-spinner k-spinner--sm" role="status" aria-label="${esc(msg().input.checking)}"></span></span>' : "",
+            bool(this, "clearable") && len > 0 && !off ? `<button type="button" class="k-input__action" data-act="clear" aria-label="${esc(msg().input.clear)}">${X}</button>` : "",
+            password ? `<button type="button" class="k-input__action" data-act="reveal" aria-label="${esc(this.revealed ? msg().input.hide : msg().input.show)}" aria-pressed="${this.revealed}">${EYE(this.revealed)}</button>` : "",
         ].join("");
         end.style.display = end.innerHTML ? "contents" : "none";
         const field = this.querySelector(":scope > .k-field");
@@ -114,7 +113,7 @@ export class KashiInput extends HTMLBase {
                 row.innerHTML = '<div class="k-field__hints"></div>';
                 field.append(row);
             }
-            row.insertAdjacentHTML("beforeend", `<span class="k-counter" id="${countId}"${max && len > max ? ' data-over=""' : ""}>${max ? `${toFaDigits(len)} / ${toFaDigits(max)}` : toFaDigits(len)}</span>`);
+            row.insertAdjacentHTML("beforeend", `<span class="k-counter" id="${countId}"${max && len > max ? ' data-over=""' : ""}>${max ? `${num(this, len)} / ${num(this, max)}` : num(this, len)}</span>`);
         }
     }
 }
@@ -195,10 +194,10 @@ export class KashiBanner extends HTMLBase {
         const box = this.box;
         const tone = this.getAttribute("tone");
         box.className = `k-banner${tone && tone !== "neutral" ? ` k-banner--${tone}` : ""}${bool(this, "flush") ? " k-banner--flush" : ""}`;
-        box.setAttribute("aria-label", this.getAttribute("label") ?? "اطلاعیه");
+        box.setAttribute("aria-label", this.getAttribute("label") ?? msg().banner.label);
         box.querySelector(".k-banner__close")?.remove();
         if (bool(this, "dismissible")) {
-            box.insertAdjacentHTML("beforeend", `<button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-banner__close" aria-label="${esc(this.getAttribute("close-label") ?? "بستن اطلاعیه")}">${ICONS.close}</button>`);
+            box.insertAdjacentHTML("beforeend", `<button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-banner__close" aria-label="${esc(this.getAttribute("close-label") ?? msg().banner.close)}">${ICONS.close}</button>`);
             box.querySelector(".k-banner__close").addEventListener("click", () => this.close());
         }
     }