@kashi-ui/elements 0.26.0 → 1.1.0

package/dist/forms.js

@@ -1,5 +1,5 @@
-import { PLATE_LETTERS, fixKeyboardLayout, fixPersianText, formatNumber, formatPlate, formatTime, isValidPlate, looksLikeWrongLayout, onlyDigits, parseTime, plateType, toFaDigits, } from "@kashi-ui/persian";
-import { HTMLBase, afterParse, bool, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+import { PLATE_LETTERS, fixKeyboardLayout, fixPersianText, formatNumber, formatPlate, formatTime, isValidPlate, looksLikeWrongLayout, onlyDigits, parseTime, plateType, toFaDigits } from "@kashi-ui/persian";
+import { afterParse, bool, define, digitsOf, emit, esc, fieldHTML, HTMLBase, lang, localeDigits, msg, num, setMessages, syncHidden, uid } from "./base.js";
 import { searchText } from "./combobox.js";
 const CHECK = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 10.5 3.2 3L15 7"/></svg>';
 const X = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m6 6 8 8M14 6l-8 8"/></svg>';
@@ -80,7 +80,7 @@ export class KashiMultiSelect extends HTMLBase {
     render() {
         const id = this.key;
         const ariaLabel = this.getAttribute("aria-label");
-        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : "انتخاب";
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : msg().multiSelect.label;
         const off = this.hasAttribute("disabled");
         const control = `<div class="k-combobox k-multiselect"><div class="k-tag-input"><input id="${id}" class="k-tag-input__control" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="${id}-list" autocomplete="off"${off ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}></div><ul id="${id}-list" role="listbox" aria-multiselectable="true" class="k-listbox" hidden style="inset-block-start: calc(100% + 6px)"${label ? ` aria-label="${esc(label)}"` : ""}></ul><span id="${id}-count" class="k-sr-only"></span><span class="k-sr-only" aria-live="polite"></span></div>`;
         this.querySelector(":scope > .k-field")?.remove();
@@ -91,9 +91,9 @@ export class KashiMultiSelect extends HTMLBase {
         this.box.addEventListener("click", (e) => {
             const rm = e.target.closest("[data-remove]");
             if (rm)
-                this.set(this.chosen.filter((v) => v !== rm.dataset.remove), `${this.labelOf(rm.dataset.remove)} حذف شد`);
+                this.set(this.chosen.filter((v) => v !== rm.dataset.remove), msg().common.removed(this.labelOf(rm.dataset.remove)));
             else if (e.target.closest("[data-clear]"))
-                this.set([], "همه حذف شد");
+                this.set([], msg().multiSelect.clearedAll);
             this.input.focus();
         });
         this.input.addEventListener("input", () => {
@@ -127,10 +127,10 @@ export class KashiMultiSelect extends HTMLBase {
             return;
         const on = this.chosen.includes(o.value);
         if (!on && this.full)
-            return this.announce(`حداکثر ${toFaDigits(Number(this.getAttribute("max")))} مورد`);
+            return this.announce(msg().common.max(num(this, Number(this.getAttribute("max")))));
         this.query = "";
         this.input.value = "";
-        this.set(on ? this.chosen.filter((v) => v !== o.value) : [...this.chosen, o.value], `${o.label} ${on ? "حذف شد" : "انتخاب شد"}`);
+        this.set(on ? this.chosen.filter((v) => v !== o.value) : [...this.chosen, o.value], on ? msg().common.removed(o.label) : msg().common.selected(o.label));
     }
     set(next, message) {
         this.chosen = next;
@@ -186,18 +186,18 @@ export class KashiMultiSelect extends HTMLBase {
         }
         else if (e.key === "Backspace" && !this.input.value && this.chosen.length) {
             const last = this.chosen.at(-1);
-            this.set(this.chosen.slice(0, -1), `${this.labelOf(last)} حذف شد`);
+            this.set(this.chosen.slice(0, -1), msg().common.removed(this.labelOf(last)));
         }
     }
     paint() {
         const off = this.hasAttribute("disabled");
         this.box.querySelectorAll(".k-badge, [data-clear]").forEach((el) => el.remove());
-        const badges = this.chosen.map((v) => `<span class="k-badge k-badge--brand${off ? "" : " k-badge--removable"}">${esc(this.labelOf(v))}${off ? "" : `<button type="button" class="k-badge__remove" data-remove="${esc(v)}" aria-label="حذف ${esc(this.labelOf(v))}">${X}</button>`}</span>`).join("");
+        const badges = this.chosen.map((v) => `<span class="k-badge k-badge--brand${off ? "" : " k-badge--removable"}">${esc(this.labelOf(v))}${off ? "" : `<button type="button" class="k-badge__remove" data-remove="${esc(v)}" aria-label="${esc(msg().common.remove(this.labelOf(v)))}">${X}</button>`}</span>`).join("");
         this.input.insertAdjacentHTML("beforebegin", badges);
         if (this.chosen.length > 1 && !off)
-            this.box.insertAdjacentHTML("beforeend", `<button type="button" class="k-input__action" data-clear aria-label="پاک کردن همه">${X}</button>`);
+            this.box.insertAdjacentHTML("beforeend", `<button type="button" class="k-input__action" data-clear aria-label="${esc(msg().common.clearAll)}">${X}</button>`);
         this.input.placeholder = this.chosen.length ? "" : (this.getAttribute("placeholder") ?? "");
-        this.querySelector(`#${this.key}-count`).textContent = `${toFaDigits(this.chosen.length)} مورد انتخاب شده`;
+        this.querySelector(`#${this.key}-count`).textContent = msg().multiSelect.selected(num(this, this.chosen.length));
         const error = this.getAttribute("error");
         this.box.toggleAttribute("data-invalid", !!error);
         setMessages(this.querySelector(":scope > .k-field"), this.input, this.key, error, this.getAttribute("hint"), `${this.key}-count`);
@@ -218,7 +218,7 @@ export class KashiMultiSelect extends HTMLBase {
                 const on = this.chosen.includes(o.value);
                 return `<li id="${this.key}-list-${i}" data-i="${i}" role="option" aria-selected="${on}"${o.disabled || (!on && full) ? ' aria-disabled="true"' : ""}${i === this.active ? " data-active" : ""} class="k-option k-option--check"><span class="k-multiselect__box" aria-hidden="true">${on ? CHECK : ""}</span><span class="k-option__body"><span>${mark(o.label)}</span>${o.description ? `<span class="k-option__desc">${esc(o.description)}</span>` : ""}</span></li>`;
             }).join("")
-            : '<li class="k-listbox__empty" role="presentation">نتیجه‌ای پیدا نشد.</li>';
+            : `<li class="k-listbox__empty" role="presentation">${esc(msg().common.noResults)}</li>`;
         const act = this.active >= 0 ? this.listbox.querySelector(`[data-i="${this.active}"]`) : null;
         if (act) {
             this.input.setAttribute("aria-activedescendant", act.id);
@@ -283,7 +283,7 @@ export class KashiSlider extends HTMLBase {
     }
     fmt(n) {
         const unit = this.getAttribute("unit");
-        return `${formatNumber(n)}${unit ? ` ${unit}` : ""}`;
+        return `${formatNumber(n, { digits: digitsOf(this) })}${unit ? ` ${unit}` : ""}`;
     }
     render() {
         const label = this.getAttribute("label");
@@ -294,11 +294,11 @@ export class KashiSlider extends HTMLBase {
         const input = (which) => {
             const v = which === "lo" ? this.lo : this.hi;
             const n = name ? (range ? `${name}_${which === "lo" ? "min" : "max"}` : name) : "";
-            return `<input type="range" class="k-slider__input" data-which="${which}" min="${this.min}" max="${this.max}" step="${this.num("step", 1)}" value="${v}"${off ? " disabled" : ""}${n ? ` name="${esc(n)}"` : ""}${range ? ` aria-label="${which === "lo" ? "حداقل" : "حداکثر"}${label ? ` ${esc(label)}` : ""}"` : label ? ` aria-labelledby="${this.key}-label"` : ""} aria-valuetext="${esc(this.fmt(v))}">`;
+            return `<input type="range" class="k-slider__input" data-which="${which}" min="${this.min}" max="${this.max}" step="${this.num("step", 1)}" value="${v}"${off ? " disabled" : ""}${n ? ` name="${esc(n)}"` : ""}${range ? ` aria-label="${esc(which === "lo" ? msg().slider.from : msg().slider.to)}${label ? ` ${esc(label)}` : ""}"` : label ? ` aria-labelledby="${this.key}-label"` : ""} aria-valuetext="${esc(this.fmt(v))}">`;
         };
         const marks = (this.getAttribute("marks") ?? "").split(/[,،]/).map((s) => s.trim()).filter(Boolean).map(Number);
         const showValue = this.getAttribute("show-value") !== "false";
-        this.innerHTML = `<div class="k-slider"${range ? ' data-range=""' : ""}>${label || showValue ? `<div class="k-slider__head">${label ? `<span class="k-label" id="${this.key}-label">${esc(label)}</span>` : ""}${showValue ? `<span class="k-slider__value" aria-hidden="true">${esc(range ? `${this.fmt(this.lo)} تا ${this.fmt(this.hi)}` : this.fmt(this.hi))}</span>` : ""}</div>` : ""}<div class="k-slider__track" style="--_from: ${range ? pct(this.lo) : "0%"}; --_to: ${pct(this.hi)}"><span class="k-slider__fill" aria-hidden="true"></span>${range ? input("lo") : ""}${input("hi")}</div>${marks.length ? `<div class="k-slider__marks" aria-hidden="true">${marks.map((m) => `<span>${esc(this.fmt(m))}</span>`).join("")}</div>` : ""}</div>`;
+        this.innerHTML = `<div class="k-slider"${range ? ' data-range=""' : ""}>${label || showValue ? `<div class="k-slider__head">${label ? `<span class="k-label" id="${this.key}-label">${esc(label)}</span>` : ""}${showValue ? `<span class="k-slider__value" aria-hidden="true">${esc(range ? `${this.fmt(this.lo)}${msg().common.range}${this.fmt(this.hi)}` : this.fmt(this.hi))}</span>` : ""}</div>` : ""}<div class="k-slider__track" style="--_from: ${range ? pct(this.lo) : "0%"}; --_to: ${pct(this.hi)}"><span class="k-slider__fill" aria-hidden="true"></span>${range ? input("lo") : ""}${input("hi")}</div>${marks.length ? `<div class="k-slider__marks" aria-hidden="true">${marks.map((m) => `<span>${esc(this.fmt(m))}</span>`).join("")}</div>` : ""}</div>`;
         this.rendered = true;
         this.querySelectorAll(".k-slider__input").forEach((el) => el.addEventListener("input", () => {
             const n = Number(el.value);
@@ -316,7 +316,7 @@ export class KashiSlider extends HTMLBase {
             track.style.setProperty("--_to", pct(this.hi));
             const out = this.querySelector(".k-slider__value");
             if (out)
-                out.textContent = range ? `${this.fmt(this.lo)} تا ${this.fmt(this.hi)}` : this.fmt(this.hi);
+                out.textContent = range ? `${this.fmt(this.lo)}${msg().common.range}${this.fmt(this.hi)}` : this.fmt(this.hi);
             emit(this, "kashi-change", { value: this.value });
         }));
     }
@@ -362,7 +362,7 @@ export class KashiChipGroup extends HTMLBase {
             b.setAttribute("aria-pressed", String(b.hasAttribute("data-pressed") || b.getAttribute("aria-pressed") === "true"));
             b.insertAdjacentHTML("afterbegin", '<svg class="k-chip__check" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 10.5 3.2 3L15 7"/></svg>');
             if (b.dataset.count)
-                b.insertAdjacentHTML("beforeend", `<span class="k-chip__count">${toFaDigits(b.dataset.count)}</span>`);
+                b.insertAdjacentHTML("beforeend", `<span class="k-chip__count">${num(this, b.dataset.count ?? "")}</span>`);
         });
         this.addEventListener("click", (e) => {
             const b = e.target.closest(".k-chip");
@@ -384,10 +384,10 @@ export class KashiChipGroup extends HTMLBase {
 }
 KashiChipGroup.observedAttributes = ["label", "single", "name"];
 const RULES = [
-    [`حداقل ${toFaDigits(8)} نویسه`, (p) => p.length >= 8],
-    ["حروف بزرگ و کوچک انگلیسی", (p) => /[a-z]/.test(p) && /[A-Z]/.test(p)],
-    ["دست‌کم یک عدد", (p) => /\d/.test(p)],
-    ["دست‌کم یک نماد، مثل ! یا @", (p) => /[^A-Za-z0-9\s؀-ۿ]/.test(p)],
+    [(m) => m.length(localeDigits() === "fa" ? toFaDigits(8) : "8"), (p) => p.length >= 8],
+    [(m) => m.cases, (p) => /[a-z]/.test(p) && /[A-Z]/.test(p)],
+    [(m) => m.digit, (p) => /\d/.test(p)],
+    [(m) => m.symbol, (p) => /[^A-Za-z0-9\s؀-ۿ]/.test(p)],
 ];
 /** قدرت رمز زیر فیلد رمز؛ با for="شناسهٔ فیلد" به آن وصل می‌شود و با هر تایپ به‌روز می‌شود */
 export class KashiPasswordStrength extends HTMLBase {
@@ -433,11 +433,12 @@ export class KashiPasswordStrength extends HTMLBase {
     }
     render(p) {
         const score = this.score(p);
-        const levels = ["ضعیف", "متوسط", "خوب", "قوی"];
+        const P = msg().password;
+        const levels = P.levels;
         const persian = /[؀-ۿ]/.test(p);
-        this.innerHTML = `<div class="k-strength" data-score="${score}"><div class="k-strength__bars" aria-hidden="true">${"<span class=\"k-strength__bar\"></span>".repeat(4)}</div><p class="k-strength__label" aria-live="polite" style="margin: 0">${score ? `قدرت رمز: <strong>${levels[score - 1]}</strong>` : ""}</p>${persian ? '<p class="k-hint k-hint--error" role="alert">رمز حروف فارسی دارد؛ شاید صفحه‌کلید روی فارسی مانده است.</p>' : ""}${this.getAttribute("show-rules") === "false" ? "" : `<ul class="k-strength__rules">${RULES.map(([label, t]) => {
+        this.innerHTML = `<div class="k-strength" data-score="${score}"><div class="k-strength__bars" aria-hidden="true">${"<span class=\"k-strength__bar\"></span>".repeat(4)}</div><p class="k-strength__label" aria-live="polite" style="margin: 0">${score ? esc(P.strength("\u0000")).replace("\u0000", `<strong>${esc(levels[score - 1])}</strong>`) : ""}</p>${persian ? `<p class="k-hint k-hint--error" role="alert">${esc(P.persian)}</p>` : ""}${this.getAttribute("show-rules") === "false" ? "" : `<ul class="k-strength__rules">${RULES.map(([label, t]) => {
             const met = t(p);
-            return `<li class="k-strength__rule"${met ? ' data-met=""' : ""}>${met ? CHECK : '<svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="2.5" fill="currentColor"/></svg>'}<span>${label}<span class="k-sr-only">${met ? "، رعایت شده" : "، رعایت نشده"}</span></span></li>`;
+            return `<li class="k-strength__rule"${met ? ' data-met=""' : ""}>${met ? CHECK : '<svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="2.5" fill="currentColor"/></svg>'}<span>${esc(label(P))}<span class="k-sr-only">${met ? P.met : P.unmet}</span></span></li>`;
         }).join("")}</ul>`}</div>`;
     }
 }
@@ -519,13 +520,15 @@ class TextField extends HTMLBase {
         emit(this, "kashi-change", { value: next });
     }
 }
-const KINDS = { arabic: "حرف عربی", zwnj: "نیم‌فاصله", punctuation: "علامت", digits: "رقم", spacing: "فاصله" };
+const KINDS = ["arabic", "zwnj", "punctuation", "digits", "spacing"];
 /** متن چندخطی با ویرایش نگارشی: ی و ک عربی، نیم‌فاصله، علامت‌ها و ارقام را می‌شمارد و با یک دکمه اصلاح می‌کند */
 export class KashiPersianTextarea extends TextField {
     constructor() {
         super(...arguments);
         this.multiline = true;
-        this.defaultLabel = "متن";
+    }
+    get defaultLabel() {
+        return msg().persianInput.text;
     }
     render() {
         super.render();
@@ -547,9 +550,10 @@ export class KashiPersianTextarea extends TextField {
             return this.getAttribute("hint") ? esc(this.getAttribute("hint")) : null;
         const r = this.result();
         if (!r.count)
-            return '<span class="k-textfix" data-state="clean"><span class="k-textfix__text">نگارش متن درست است.</span></span>';
-        const summary = Object.keys(KINDS).filter((k) => r.fixes[k]).map((k) => `${toFaDigits(r.fixes[k])} ${KINDS[k]}`).join("، ");
-        return `<span class="k-textfix" data-state="fix"><span class="k-textfix__text">${toFaDigits(r.count)} مورد قابل اصلاح: ${summary}</span><button type="button" class="k-btn k-btn--tertiary k-btn--xs" data-fix>اصلاح نگارش</button></span>`;
+            return `<span class="k-textfix" data-state="clean"><span class="k-textfix__text">${esc(msg().textFix.clean)}</span></span>`;
+        const T = msg().textFix;
+        const summary = KINDS.filter((k) => r.fixes[k]).map((k) => `${num(this, r.fixes[k])} ${T[k]}`).join(msg().common.list);
+        return `<span class="k-textfix" data-state="fix"><span class="k-textfix__text">${esc(T.count(num(this, r.count), summary))}</span><button type="button" class="k-btn k-btn--tertiary k-btn--xs" data-fix>${esc(T.fix)}</button></span>`;
     }
 }
 KashiPersianTextarea.observedAttributes = ["label", "hint", "error", "placeholder", "required", "disabled", "name", "value", "rows", "fix-on-blur", "fix-digits", "aria-label"];
@@ -558,7 +562,9 @@ export class KashiKeyboardFix extends TextField {
     constructor() {
         super(...arguments);
         this.multiline = false;
-        this.defaultLabel = "متن";
+    }
+    get defaultLabel() {
+        return msg().persianInput.text;
     }
     render() {
         super.render();
@@ -573,7 +579,7 @@ export class KashiKeyboardFix extends TextField {
         const show = this.getAttribute("suggest") === "always" ? latin : looksLikeWrongLayout(t);
         if (!show)
             return this.getAttribute("hint") ? esc(this.getAttribute("hint")) : null;
-        return `<span class="k-kbfix" role="status">منظورتان <button type="button" class="k-kbfix__btn" data-fix>«${esc(fixKeyboardLayout(t))}»</button> بود؟</span>`;
+        return `<span class="k-kbfix" role="status">${esc(msg().keyboardFix.before)} <button type="button" class="k-kbfix__btn" data-fix>«${esc(fixKeyboardLayout(t))}»</button>${lang() === "en" ? "" : " "}${esc(msg().keyboardFix.after)}</span>`;
     }
 }
 KashiKeyboardFix.observedAttributes = ["label", "hint", "error", "placeholder", "required", "disabled", "name", "value", "suggest", "aria-label"];
@@ -619,7 +625,7 @@ export class KashiTimeInput extends HTMLBase {
         return t ? formatTime(t) : null;
     }
     show(s) {
-        return s ? (this.getAttribute("digits") === "latin" ? s : toFaDigits(s)) : "";
+        return s ? (digitsOf(this) === "latin" ? s : toFaDigits(s)) : "";
     }
     get lo() {
         const t = parseTime(this.getAttribute("min") ?? "");
@@ -632,8 +638,8 @@ export class KashiTimeInput extends HTMLBase {
     render() {
         const id = this.key;
         const ariaLabel = this.getAttribute("aria-label");
-        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : "ساعت";
-        const fa = this.getAttribute("digits") !== "latin";
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : msg().persianInput.time;
+        const fa = digitsOf(this) === "fa";
         const control = `<div class="k-input"><input id="${id}" class="k-input__control" type="text" inputmode="numeric" dir="ltr" autocomplete="off" placeholder="${esc(this.getAttribute("placeholder") ?? (fa ? "۰۹:۳۰" : "09:30"))}"${this.hasAttribute("required") ? " required" : ""}${this.hasAttribute("disabled") ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}><span class="k-input__addon">${CLOCK}</span></div>`;
         this.querySelector(":scope > .k-field")?.remove();
         this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, required: this.hasAttribute("required"), control }));
@@ -680,11 +686,11 @@ export class KashiTimeInput extends HTMLBase {
     paint(syncText = true) {
         if (syncText)
             this.input.value = this.show(this.current);
-        const msg = this.invalid === "range"
-            ? `ساعت باید بین ${this.show(formatTime(fromMin(this.lo)))} و ${this.show(formatTime(fromMin(this.hi)))} باشد.`
-            : this.invalid ? "ساعت معتبر نیست؛ آن را به شکل ۰۹:۳۰ وارد کنید." : null;
-        this.input.setCustomValidity(msg ?? "");
-        setMessages(this.querySelector(":scope > .k-field"), this.input, this.key, this.getAttribute("error") || msg, this.getAttribute("hint"));
+        const text = this.invalid === "range"
+            ? msg().invalid.timeRange(this.show(formatTime(fromMin(this.lo))), this.show(formatTime(fromMin(this.hi))))
+            : this.invalid ? msg().invalid.time : null;
+        this.input.setCustomValidity(text ?? "");
+        setMessages(this.querySelector(":scope > .k-field"), this.input, this.key, this.getAttribute("error") || text, this.getAttribute("hint"));
         syncHidden(this, this.getAttribute("name"), this.current ?? "");
     }
 }
@@ -735,8 +741,9 @@ export class KashiPlateInput extends HTMLBase {
         const p = this.plate;
         const off = this.hasAttribute("disabled") ? " disabled" : "";
         const seg = (key, len, aria, cls = "", first = false) => `<input${first ? ` id="${k}-first"` : ""} class="k-plate__seg ${cls}" data-key="${key}" data-len="${len}" inputmode="numeric" autocomplete="off" aria-label="${aria}" placeholder="${toFaDigits("0".repeat(len))}" value="${toFaDigits(p[key])}"${off}>`;
-        const label = this.getAttribute("label") ?? "پلاک خودرو";
-        const control = `<div class="k-plate" role="group" aria-label="${esc(label)}" data-type="${plateType(p.letter)}"><span class="k-plate__flag" aria-hidden="true"><span class="k-plate__flag-colors"></span>I.R.<br>IRAN</span>${seg("first", 2, "دو رقم اول پلاک", "", true)}<select class="k-plate__letter" data-key="letter" aria-label="حرف پلاک"${off}><option value="">–</option>${PLATE_LETTERS.map((l) => `<option value="${l}"${l === p.letter ? " selected" : ""}>${l === "ه" ? "هـ" : l}</option>`).join("")}</select>${seg("middle", 3, "سه رقم پلاک", "k-plate__seg--3")}<span class="k-plate__region"><span class="k-plate__region-label" aria-hidden="true">ایران</span>${seg("region", 2, "کد استان")}</span></div><span class="k-sr-only" aria-live="polite"></span>`;
+        const PL = msg().plate;
+        const label = this.getAttribute("label") ?? PL.label;
+        const control = `<div class="k-plate" role="group" aria-label="${esc(label)}" data-type="${plateType(p.letter)}"><span class="k-plate__flag" aria-hidden="true"><span class="k-plate__flag-colors"></span>I.R.<br>IRAN</span>${seg("first", 2, PL.first, "", true)}<select class="k-plate__letter" data-key="letter" aria-label="${esc(PL.letter)}"${off}><option value="">–</option>${PLATE_LETTERS.map((l) => `<option value="${l}"${l === p.letter ? " selected" : ""}>${l === "ه" ? "هـ" : l}</option>`).join("")}</select>${seg("middle", 3, PL.middle, "k-plate__seg--3")}<span class="k-plate__region"><span class="k-plate__region-label" aria-hidden="true">ایران</span>${seg("region", 2, PL.region)}</span></div><span class="k-sr-only" aria-live="polite"></span>`;
         this.querySelector(":scope > .k-field")?.remove();
         this.insertAdjacentHTML("afterbegin", fieldHTML({ id: `${k}-first`, label, control }));
         const parts = [...this.querySelectorAll("[data-key]")];
@@ -786,7 +793,7 @@ export class KashiPlateInput extends HTMLBase {
         group.dataset.type = plateType(p.letter);
         const complete = p.first.length === 2 && !!p.letter && p.middle.length === 3 && p.region.length === 2;
         const showInvalid = (this.touched || complete) && Object.values(p).some(Boolean) && !this.valid;
-        const error = this.getAttribute("error") || (showInvalid ? "پلاک خودرو معتبر نیست." : null);
+        const error = this.getAttribute("error") || (showInvalid ? msg().invalid.plate : null);
         group.toggleAttribute("data-invalid", !!error);
         setMessages(this.querySelector(":scope > .k-field"), group, this.key, error, this.getAttribute("hint"));
         this.querySelector(".k-field > .k-sr-only").textContent = this.valid ? formatPlate(p) : "";
@@ -834,10 +841,10 @@ export class KashiInlineEdit extends HTMLBase {
             this.render();
     }
     render(focus = false) {
-        const label = this.getAttribute("label") ?? "متن";
+        const label = this.getAttribute("label") ?? msg().persianInput.text;
         this.rendered = true;
         this.editing = false;
-        this.innerHTML = `<span class="k-inline-edit"><button type="button" class="k-inline-edit__view" aria-label="${esc(`${label}: ${this.text || "خالی"}، ویرایش`)}">${this.text ? esc(this.text) : `<span class="k-inline-edit__placeholder">${esc(this.getAttribute("placeholder") ?? "خالی")}</span>`}${PENCIL}</button></span>`;
+        this.innerHTML = `<span class="k-inline-edit"><button type="button" class="k-inline-edit__view" aria-label="${esc(`${label}: ${this.text || msg().inlineEdit.empty}${msg().common.list}${msg().common.edit}`)}">${this.text ? esc(this.text) : `<span class="k-inline-edit__placeholder">${esc(this.getAttribute("placeholder") ?? msg().inlineEdit.empty)}</span>`}${PENCIL}</button></span>`;
         const view = this.querySelector("button");
         view.addEventListener("click", () => this.edit());
         if (focus)
@@ -845,9 +852,9 @@ export class KashiInlineEdit extends HTMLBase {
     }
     edit(error, draft = this.text) {
         this.editing = true;
-        const label = this.getAttribute("label") ?? "متن";
+        const label = this.getAttribute("label") ?? msg().persianInput.text;
         const errId = uid("kashi-ie-err");
-        this.innerHTML = `<span class="k-inline-edit"><span class="k-field" style="gap: 4px"><span class="k-input"${error ? ' data-state="invalid"' : ""}><input class="k-input__control" aria-label="${esc(label)}" placeholder="${esc(this.getAttribute("placeholder") ?? "")}"${error ? ` aria-invalid="true" aria-describedby="${errId}"` : ""}></span>${error ? `<span class="k-hint k-hint--error" id="${errId}">${esc(error)}</span>` : ""}</span><span class="k-inline-edit__actions"><button type="button" class="k-btn k-btn--primary k-btn--icon k-btn--sm" data-save aria-label="ثبت">${CHECK}</button><button type="button" class="k-btn k-btn--secondary k-btn--icon k-btn--sm" data-cancel aria-label="انصراف">${X}</button></span></span>`;
+        this.innerHTML = `<span class="k-inline-edit"><span class="k-field" style="gap: 4px"><span class="k-input"${error ? ' data-state="invalid"' : ""}><input class="k-input__control" aria-label="${esc(label)}" placeholder="${esc(this.getAttribute("placeholder") ?? "")}"${error ? ` aria-invalid="true" aria-describedby="${errId}"` : ""}></span>${error ? `<span class="k-hint k-hint--error" id="${errId}">${esc(error)}</span>` : ""}</span><span class="k-inline-edit__actions"><button type="button" class="k-btn k-btn--primary k-btn--icon k-btn--sm" data-save aria-label="${esc(msg().common.save)}">${CHECK}</button><button type="button" class="k-btn k-btn--secondary k-btn--icon k-btn--sm" data-cancel aria-label="${esc(msg().common.cancel)}">${X}</button></span></span>`;
         const input = this.querySelector("input");
         input.value = draft;
         input.focus();
@@ -883,7 +890,7 @@ export class KashiInlineEdit extends HTMLBase {
             }
             catch {
                 this.text = prev;
-                return this.edit("ذخیره نشد؛ دوباره امتحان کنید.", raw);
+                return this.edit(msg().inlineEdit.failed, raw);
             }
         }
         this.render(true);

package/dist/index.d.ts

@@ -17,6 +17,10 @@ import { KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip } from "./overlay
 import { KashiToaster, toast } from "./toast.js";
 export { KashiCardNumber, KashiIban, KashiLandline, KashiLegalId, KashiMobile, KashiNationalId, KashiPostalCode, KashiPrice, KashiOtp, KashiProvinceSelect, KashiCombobox, KashiCitySelect, KashiIranMap, KashiAddressForm, KashiCalendar, KashiDatePicker, KashiCountdown, KashiDate, KashiMoney, KashiRelativeTime, KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip, KashiToaster, toast, KashiDropdownMenu, KashiPopover, KashiTagInput, KashiNumberInput, KashiRating, KashiPagination, KashiDataTable, KashiMultiSelect, KashiSlider, KashiChipGroup, KashiPasswordStrength, KashiPersianTextarea, KashiKeyboardFix, KashiTimeInput, KashiPlateInput, KashiInlineEdit, KashiDateRangePicker, KashiMonthPicker, KashiFileUpload, KashiColorPicker, KashiBarChart, KashiLineChart, KashiPieChart, KashiBarList, KashiProportionBar, KashiSparkline, KashiActivityHeatmap, KashiCommandPalette, KashiContextMenu, KashiCarousel, KashiTreeView, KashiTour, KashiSplitter, KashiSideNav, KashiInput, KashiTextarea, KashiBanner, KashiAppointmentPicker, };
 export { KashiDigitsInput } from "./inputs.js";
+/** زبان متن‌های داخلی همهٔ عنصرها: setLocale("en") */
+export { setLocale } from "./base.js";
+export { faMessages, enMessages } from "@kashi-ui/persian";
+export type { KashiMessages, KashiMessagesInput, KashiLocale } from "@kashi-ui/persian";
 export type { ToastOptions, ToastTone } from "./toast.js";
 export type { ComboboxOption } from "./combobox.js";
 export type { TableColumn } from "./table.js";

package/dist/index.js

@@ -19,6 +19,9 @@ import { KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip } from "./overlay
 import { KashiToaster, toast } from "./toast.js";
 export { KashiCardNumber, KashiIban, KashiLandline, KashiLegalId, KashiMobile, KashiNationalId, KashiPostalCode, KashiPrice, KashiOtp, KashiProvinceSelect, KashiCombobox, KashiCitySelect, KashiIranMap, KashiAddressForm, KashiCalendar, KashiDatePicker, KashiCountdown, KashiDate, KashiMoney, KashiRelativeTime, KashiCopyButton, KashiDialog, KashiTabs, KashiTooltip, KashiToaster, toast, KashiDropdownMenu, KashiPopover, KashiTagInput, KashiNumberInput, KashiRating, KashiPagination, KashiDataTable, KashiMultiSelect, KashiSlider, KashiChipGroup, KashiPasswordStrength, KashiPersianTextarea, KashiKeyboardFix, KashiTimeInput, KashiPlateInput, KashiInlineEdit, KashiDateRangePicker, KashiMonthPicker, KashiFileUpload, KashiColorPicker, KashiBarChart, KashiLineChart, KashiPieChart, KashiBarList, KashiProportionBar, KashiSparkline, KashiActivityHeatmap, KashiCommandPalette, KashiContextMenu, KashiCarousel, KashiTreeView, KashiTour, KashiSplitter, KashiSideNav, KashiInput, KashiTextarea, KashiBanner, KashiAppointmentPicker, };
 export { KashiDigitsInput } from "./inputs.js";
+/** زبان متن‌های داخلی همهٔ عنصرها: setLocale("en") */
+export { setLocale } from "./base.js";
+export { faMessages, enMessages } from "@kashi-ui/persian";
 /** نام همهٔ عنصرها؛ مثلاً برای isCustomElement در Vue */
 export const KASHI_ELEMENTS = [
     "kashi-national-id", "kashi-legal-id", "kashi-mobile", "kashi-landline", "kashi-card-number", "kashi-iban",

package/dist/inputs.d.ts

@@ -6,13 +6,13 @@ type Meta = {
     bank?: Bank;
 } | null;
 interface Kind {
-    label: string;
+    label: () => string;
     maxDigits: number;
     format: (raw: string) => string;
     normalize?: (digits: string) => string;
     /** معتبر بودن مقدار کامل */
     valid: (raw: string) => boolean;
-    invalidMessage: string;
+    invalidMessage: () => string;
     placeholder: {
         fa: string;
         latin: string;
@@ -52,7 +52,7 @@ export declare abstract class KashiDigitsInput extends HTMLBase {
     protected isValid(): boolean;
     focus(options?: FocusOptions): void;
     protected clean(text: string): string;
-    private get digits();
+    protected get digits(): "fa" | "latin";
     private shown;
     private render;
     private onInput;

package/dist/inputs.js

@@ -1,5 +1,5 @@
-import { formatCardNumber, formatIban, formatLandline, formatMobile, formatNumber, formatPostalCode, getBankByCard, getBankByIban, getLandlineProvince, getMobileOperator, isValidCardNumber, isValidIban, isValidLandline, isValidLegalId, isValidMobile, isValidNationalId, isValidPostalCode, normalizeLandline, normalizeMobile, numberToWords, onlyDigits, toFaDigits, } from "@kashi-ui/persian";
-import { HTMLBase, bool, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+import { formatCardNumber, formatIban, formatLandline, formatMobile, formatNumber, formatPostalCode, bankName, getBankByCard, getBankByIban, getLandlineProvince, getMobileOperator, operatorName, isValidCardNumber, isValidIban, isValidLandline, isValidLegalId, isValidMobile, isValidNationalId, isValidPostalCode, normalizeLandline, normalizeMobile, numberToWords, onlyDigits, toFaDigits, } from "@kashi-ui/persian";
+import { bool, define, emit, esc, fieldHTML, HTMLBase, lang, msg, setMessages, syncHidden, uid } from "./base.js";
 const fa = (s) => toFaDigits(s);
 /** موقعیت مکان‌نما پس از n رقم در متن قالب‌بندی‌شده */
 function caretAfter(text, n) {
@@ -69,7 +69,7 @@ export class KashiDigitsInput extends HTMLBase {
     }
     get digits() {
         const d = this.getAttribute("digits");
-        return d === "fa" || d === "latin" ? d : this.kind.digits;
+        return d === "fa" || d === "latin" ? d : lang() === "en" ? "latin" : this.kind.digits;
     }
     shown() {
         const f = this.kind.format(this.raw);
@@ -79,7 +79,7 @@ export class KashiDigitsInput extends HTMLBase {
         const k = this.kind;
         const id = this.key;
         const ariaLabel = this.getAttribute("aria-label");
-        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : k.label;
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : k.label();
         const size = this.getAttribute("size");
         const required = this.hasAttribute("required");
         const disabled = this.hasAttribute("disabled");
@@ -119,7 +119,7 @@ export class KashiDigitsInput extends HTMLBase {
     /** پیام خطای فعلی؛ فیلد مبلغ آن را برای محدوده بازنویسی می‌کند */
     invalidText(touched) {
         const show = this.raw.length > 0 && (touched || this.raw.length === this.kind.maxDigits) && !this.isValid();
-        return show ? (this.getAttribute("invalid-message") ?? this.kind.invalidMessage) : null;
+        return show ? (this.getAttribute("invalid-message") ?? this.kind.invalidMessage()) : null;
     }
     hintText() {
         return this.getAttribute("hint");
@@ -174,11 +174,11 @@ export class KashiNationalId extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "کد ملی",
+            label: () => msg().persianInput["national-id"],
             maxDigits: 10,
             format: (d) => d,
             valid: (d) => isValidNationalId(d),
-            invalidMessage: "کد ملی معتبر نیست.",
+            invalidMessage: () => msg().invalid.nationalId,
             placeholder: { fa: "۰۰۰۰۰۰۰۰۰۰", latin: "0000000000" },
             digits: "fa",
         };
@@ -189,11 +189,11 @@ export class KashiLegalId extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "شناسهٔ ملی شرکت",
+            label: () => msg().persianInput["legal-id"],
             maxDigits: 11,
             format: (d) => d,
             valid: (d) => isValidLegalId(d),
-            invalidMessage: "شناسهٔ ملی معتبر نیست.",
+            invalidMessage: () => msg().invalid.legalId,
             placeholder: { fa: "۰۰۰۰۰۰۰۰۰۰۰", latin: "00000000000" },
             digits: "fa",
         };
@@ -204,12 +204,12 @@ export class KashiMobile extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "شمارهٔ موبایل",
+            label: () => msg().persianInput.mobile,
             maxDigits: 11,
             normalize: normalizeMobile,
             format: formatMobile,
             valid: (d) => isValidMobile(d),
-            invalidMessage: "شماره موبایل معتبر نیست.",
+            invalidMessage: () => msg().invalid.mobile,
             placeholder: { fa: "۰۹۱۲ ۳۴۵ ۶۷۸۹", latin: "0912 345 6789" },
             digits: "fa",
             type: "tel",
@@ -217,7 +217,7 @@ export class KashiMobile extends KashiDigitsInput {
             autocomplete: "tel-national",
             meta: (d) => {
                 const op = getMobileOperator(d);
-                return op ? { text: op.name } : null;
+                return op ? { text: operatorName(op, lang()) } : null;
             },
             detail: (d) => ({ operator: getMobileOperator(d)?.name ?? null }),
         };
@@ -228,12 +228,12 @@ export class KashiLandline extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "تلفن ثابت",
+            label: () => msg().persianInput.landline,
             maxDigits: 11,
             normalize: normalizeLandline,
             format: formatLandline,
             valid: (d) => isValidLandline(d),
-            invalidMessage: "شمارهٔ تلفن ثابت معتبر نیست.",
+            invalidMessage: () => msg().invalid.landline,
             placeholder: { fa: "۰۲۱ ۸۸۷۷ ۶۶۵۵", latin: "021 8877 6655" },
             digits: "fa",
             type: "tel",
@@ -252,17 +252,17 @@ export class KashiCardNumber extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "شمارهٔ کارت",
+            label: () => msg().persianInput.card,
             maxDigits: 16,
             format: formatCardNumber,
             valid: (d) => isValidCardNumber(d),
-            invalidMessage: "شماره کارت معتبر نیست.",
+            invalidMessage: () => msg().invalid.card,
             placeholder: { fa: "۰۰۰۰ ۰۰۰۰ ۰۰۰۰ ۰۰۰۰", latin: "0000 0000 0000 0000" },
             digits: "fa",
             autocomplete: "cc-number",
             meta: (d) => {
                 const bank = getBankByCard(d);
-                return bank ? { text: bank.name, bank } : null;
+                return bank ? { text: bankName(bank, lang()), bank } : null;
             },
             detail: (d) => ({ bank: getBankByCard(d)?.name ?? null }),
         };
@@ -273,16 +273,16 @@ export class KashiIban extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "شمارهٔ شبا",
+            label: () => msg().persianInput.iban,
             maxDigits: 24,
             format: (d) => formatIban(d),
             valid: (d) => isValidIban(d),
-            invalidMessage: "شماره شبا معتبر نیست.",
+            invalidMessage: () => msg().invalid.iban,
             placeholder: { fa: "IR00 0000 0000 0000 0000 0000 00", latin: "IR00 0000 0000 0000 0000 0000 00" },
             digits: "latin",
             meta: (d) => {
                 const bank = getBankByIban(d);
-                return bank ? { text: bank.name, bank } : null;
+                return bank ? { text: bankName(bank, lang()), bank } : null;
             },
             submit: (d) => (d ? `IR${d}` : ""),
             detail: (d) => ({ bank: getBankByIban(d)?.name ?? null }),
@@ -297,11 +297,11 @@ export class KashiPostalCode extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "کد پستی",
+            label: () => msg().persianInput.postal,
             maxDigits: 10,
             format: formatPostalCode,
             valid: (d) => isValidPostalCode(d),
-            invalidMessage: "کد پستی معتبر نیست.",
+            invalidMessage: () => msg().invalid.postal,
             placeholder: { fa: "۱۲۳۴۵-۶۷۸۹۰", latin: "12345-67890" },
             digits: "fa",
             autocomplete: "postal-code",
@@ -313,16 +313,16 @@ export class KashiPrice extends KashiDigitsInput {
     constructor() {
         super(...arguments);
         this.kind = {
-            label: "مبلغ",
+            label: () => msg().persianInput.price,
             maxDigits: 15,
             normalize: (d) => d.replace(/^0+(?=\d)/, ""),
-            format: (d) => (d ? formatNumber(d, { digits: "latin" }).replace(/,/g, "٬") : ""),
+            format: (d) => (d ? formatNumber(d, { digits: "latin" }).replace(/,/g, this.digits === "fa" ? "٬" : ",") : ""),
             valid: () => this.inRange(),
-            invalidMessage: "",
+            invalidMessage: () => "",
             placeholder: { fa: "۰", latin: "0" },
             digits: "fa",
             meta: (_d, host) => {
-                const unit = host.getAttribute("unit") ?? "تومان";
+                const unit = host.getAttribute("unit") ?? msg().money.toman;
                 return unit ? { text: unit } : null;
             },
             detail: (d) => ({ value: d ? Number(d) : null }),
@@ -349,13 +349,14 @@ export class KashiPrice extends KashiDigitsInput {
         if (custom)
             return custom;
         const min = this.num("min"), max = this.num("max");
-        const f = (n) => fa(formatNumber(n));
-        return `مبلغ باید ${min !== undefined ? `حداقل ${f(min)}` : ""}${min !== undefined && max !== undefined ? " و " : ""}${max !== undefined ? `حداکثر ${f(max)}` : ""} باشد.`;
+        const f = (n) => (this.digits === "fa" ? fa(formatNumber(n)) : formatNumber(n, { digits: "latin" }));
+        const I = msg().invalid;
+        return min !== undefined && max !== undefined ? I.priceRange(f(min), f(max)) : min !== undefined ? I.priceMin(f(min)) : I.priceMax(f(max));
     }
     hintText() {
         if (this.raw && bool(this, "show-words", true)) {
-            const unit = this.getAttribute("unit") ?? "تومان";
-            return `${numberToWords(Number(this.raw))}${unit ? ` ${unit}` : ""}`;
+            const unit = this.getAttribute("unit") ?? msg().money.toman;
+            return `${numberToWords(Number(this.raw), { locale: lang() })}${unit ? ` ${unit}` : ""}`;
         }
         return this.getAttribute("hint");
     }