@kashi-ui/elements 0.25.0 → 1.0.0

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");
     }

package/dist/map.js

@@ -1,5 +1,5 @@
 import { EMPTY_ADDRESS, PROVINCES, formatNumber, getCities } from "@kashi-ui/persian";
-import { HTMLBase, afterParse, bool, define, emit, esc, uid } from "./base.js";
+import { afterParse, bool, define, digitsOf, emit, esc, HTMLBase, msg, uid } from "./base.js";
 import { IRAN_PROVINCES, IRAN_VIEWBOX } from "./iranMapData.js";
 // فرم نشانی از این عنصرها ساخته شده؛ با import همین فایل به‌تنهایی هم ثبت شوند
 import "./combobox.js";
@@ -83,7 +83,7 @@ export class KashiIranMap extends HTMLBase {
         return this.multiple || bool(this, "selectable") || this.hasAttribute("value") || this.hasAttribute("name");
     }
     fmt(n) {
-        return formatNumber(n);
+        return formatNumber(n, { digits: digitsOf(this) });
     }
     level(n) {
         const data = this.values;
@@ -115,7 +115,7 @@ export class KashiIranMap extends HTMLBase {
         return typeof v === "number" ? `${n}: ${this.fmt(v)}${unit ? ` ${unit}` : ""}` : n;
     }
     render() {
-        const label = this.getAttribute("label") ?? "نقشهٔ استان‌های ایران";
+        const label = this.getAttribute("label") ?? msg().iranMap.label;
         const sel = this.selectable;
         const multi = this.multiple;
         const data = this.values;
@@ -133,7 +133,7 @@ export class KashiIranMap extends HTMLBase {
             ? `<table class="k-sr-only"><caption>${esc(label)}</caption><tbody>${NAMES.filter((n) => typeof data[n] === "number").sort((a, b) => data[b] - data[a]).map((n) => `<tr><th scope="row">${esc(n)}</th><td>${this.fmt(data[n])}${unit ? ` ${esc(unit)}` : ""}</td></tr>`).join("")}</tbody></table>`
             : "";
         // نسبت ابعاد با aspect-ratio، نه padding درصدی: در چیدمان flex ستونی ارتفاع padding درصدی صفر حساب می‌شود
-        this.innerHTML = `<figure class="k-iran-map${sel ? " k-iran-map--selectable" : ""}"><div class="k-iran-map__canvas" style="block-size: auto; aspect-ratio: ${VW} / ${VH}"><svg viewBox="${IRAN_VIEWBOX}" class="k-iran-map__svg" role="${sel ? (multi ? "group" : "radiogroup") : "img"}" aria-label="${esc(sel ? label : `${label}${data ? "؛ جدول داده در ادامه" : ""}`)}">${paths}</svg><div class="k-chart__tip" aria-hidden="true" style="display: none"></div></div>${legend}${table}</figure>`;
+        this.innerHTML = `<figure class="k-iran-map${sel ? " k-iran-map--selectable" : ""}"><div class="k-iran-map__canvas" style="block-size: auto; aspect-ratio: ${VW} / ${VH}"><svg viewBox="${IRAN_VIEWBOX}" class="k-iran-map__svg" role="${sel ? (multi ? "group" : "radiogroup") : "img"}" aria-label="${esc(sel ? label : `${label}${data ? msg().iranMap.tableNote : ""}`)}">${paths}</svg><div class="k-chart__tip" aria-hidden="true" style="display: none"></div></div>${legend}${table}</figure>`;
         const svg = this.querySelector("svg");
         const fig = this.querySelector("figure");
         svg.addEventListener("pointerover", (e) => {
@@ -235,7 +235,7 @@ export class KashiIranMap extends HTMLBase {
         const w = this.querySelector("figure").clientWidth || VW;
         const v = this.values?.[n];
         const unit = this.getAttribute("unit");
-        const row = typeof v === "number" ? `${this.fmt(v)}${unit ? ` ${unit}` : ""}` : `مرکز: ${CAPITAL[n]}`;
+        const row = typeof v === "number" ? `${this.fmt(v)}${unit ? ` ${unit}` : ""}` : msg().province.capital(CAPITAL[n]);
         box.innerHTML = `<span class="k-chart__tip-title">${esc(n)}</span><span class="k-chart__tip-row"><strong>${esc(row)}</strong></span>`;
         // داخل ظرف بماند و راهنمای استان‌های شمالی بالای نقشه بیرون نزند
         box.style.left = `${Math.min(Math.max((p.x / VW) * w, 80), w - 80)}px`;
@@ -244,7 +244,10 @@ export class KashiIranMap extends HTMLBase {
     }
 }
 KashiIranMap.observedAttributes = ["data", "value", "label", "unit", "steps", "scale", "legend", "selectable", "multiple", "name"];
-const LABELS = { province: "استان", city: "شهر", street: "نشانی", plaque: "پلاک", unit: "واحد", postalCode: "کد پستی" };
+const LABELS = () => {
+    const A = msg().address;
+    return { province: A.province, city: A.city, street: A.street, plaque: A.plaque, unit: A.unit, postalCode: A.postalCode };
+};
 /**
  * فرم نشانی ایرانی: استان، شهرِ همان استان، نشانی، پلاک، واحد و کد پستی ده‌رقمی؛ با map نقشهٔ ایران برای انتخاب استان.
  * با انتخاب شهر بدون استان، استان خودکار پر می‌شود و با عوض شدن استان، شهرِ نامربوط پاک می‌شود.
@@ -291,7 +294,7 @@ export class KashiAddressForm extends HTMLBase {
     }
     /** خطای هر فیلد، مثلاً از اعتبارسنجی سرور: { plaque: "پلاک را بنویسید." } */
     set errors(e) {
-        for (const f of Object.keys(LABELS)) {
+        for (const f of Object.keys(LABELS())) {
             const el = this.querySelector(`[data-field="${f}"]`);
             if (!el)
                 continue;
@@ -306,7 +309,7 @@ export class KashiAddressForm extends HTMLBase {
         }
     }
     label(f) {
-        return this.getAttribute(`label-${f === "postalCode" ? "postal-code" : f}`) ?? LABELS[f];
+        return this.getAttribute(`label-${f === "postalCode" ? "postal-code" : f}`) ?? LABELS()[f];
     }
     render() {
         const a = this.address;
@@ -317,18 +320,18 @@ export class KashiAddressForm extends HTMLBase {
         const map = bool(this, "map");
         const k = this.key;
         const reqMark = req ? '<span class="k-label__required" aria-hidden="true">*</span>' : "";
-        const legend = this.getAttribute("legend") ?? "نشانی";
+        const legend = this.getAttribute("legend") ?? msg().address.legend;
         this.innerHTML = `<fieldset class="k-address${map ? " k-address--map" : ""}"${this.hasAttribute("disabled") ? " disabled" : ""}>
 ${legend ? `<legend class="k-address__legend">${esc(legend)}</legend>` : ""}
 <div class="k-address__fields">
-<kashi-province-select class="k-address__province" data-field="province" label="${esc(this.label("province"))}" show-capital="false" placeholder="جستجوی استان"${n("province")}${r}></kashi-province-select>
+<kashi-province-select class="k-address__province" data-field="province" label="${esc(this.label("province"))}" show-capital="false" placeholder="${esc(msg().address.provinceSearch)}"${n("province")}${r}></kashi-province-select>
 <kashi-city-select class="k-address__city" data-field="city" label="${esc(this.label("city"))}"${n("city")}${r}></kashi-city-select>
-<div class="k-field k-address__street" data-field="street"><div class="k-field__label-row"><label class="k-label" for="${k}-street">${esc(this.label("street"))}${reqMark}</label></div><div class="k-input k-input--textarea k-input--autoresize"><textarea id="${k}-street" class="k-input__control" rows="2" autocomplete="street-address" placeholder="خیابان، کوچه، نام ساختمان"${n("street")}${r}></textarea></div></div>
+<div class="k-field k-address__street" data-field="street"><div class="k-field__label-row"><label class="k-label" for="${k}-street">${esc(this.label("street"))}${reqMark}</label></div><div class="k-input k-input--textarea k-input--autoresize"><textarea id="${k}-street" class="k-input__control" rows="2" autocomplete="street-address" placeholder="${esc(msg().address.streetHint)}"${n("street")}${r}></textarea></div></div>
 <div class="k-field k-address__plaque" data-field="plaque"><div class="k-field__label-row"><label class="k-label" for="${k}-plaque">${esc(this.label("plaque"))}${reqMark}</label></div><div class="k-input"><input id="${k}-plaque" class="k-input__control" inputmode="numeric" autocomplete="address-line2"${n("plaque")}${r}></div></div>
-<div class="k-field k-address__unit" data-field="unit"><div class="k-field__label-row"><label class="k-label" for="${k}-unit">${esc(this.label("unit"))}${req ? '<span class="k-label__optional">اختیاری</span>' : ""}</label></div><div class="k-input"><input id="${k}-unit" class="k-input__control" inputmode="numeric" autocomplete="address-line3"${n("unit")}></div></div>
+<div class="k-field k-address__unit" data-field="unit"><div class="k-field__label-row"><label class="k-label" for="${k}-unit">${esc(this.label("unit"))}${req ? `<span class="k-label__optional">${esc(msg().common.optional)}</span>` : ""}</label></div><div class="k-input"><input id="${k}-unit" class="k-input__control" inputmode="numeric" autocomplete="address-line3"${n("unit")}></div></div>
 <kashi-postal-code class="k-address__postal" data-field="postalCode" label="${esc(this.label("postalCode"))}"${n("postalCode")}${r}></kashi-postal-code>
 </div>
-${map ? `<kashi-iran-map class="k-address__map" selectable label="${esc(`${this.label("province")} روی نقشه`)}"></kashi-iran-map>` : ""}
+${map ? `<kashi-iran-map class="k-address__map" selectable label="${esc(msg().iranMap.onMap(this.label("province")))}"></kashi-iran-map>` : ""}
 </fieldset>`;
         this.built = true;
         const province = this.querySelector("kashi-province-select");

package/dist/nav.js

@@ -1,5 +1,5 @@
-import { normalizePersian, toFaDigits } from "@kashi-ui/persian";
-import { HTMLBase, afterParse, bool, define, emit, esc, uid } from "./base.js";
+import { normalizePersian } from "@kashi-ui/persian";
+import { afterParse, bool, define, emit, esc, HTMLBase, msg, num, uid } from "./base.js";
 const search = (s) => normalizePersian(s, { digits: "latin" }).toLowerCase();
 const items = (menu) => [...menu.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])')];
 const SEARCH = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="9" cy="9" r="5.5"/><path d="m13.5 13.5 3 3"/></svg>';
@@ -68,9 +68,10 @@ export class KashiCommandPalette extends HTMLBase {
     build() {
         const d = document.createElement("dialog");
         d.className = "k-dialog k-command";
-        const title = this.getAttribute("label") ?? "پالت فرمان";
+        const M = msg();
+        const title = this.getAttribute("label") ?? M.command.title;
         d.setAttribute("aria-label", title);
-        d.innerHTML = `<div class="k-input"><span class="k-input__addon">${SEARCH}</span><input class="k-input__control" type="text" role="combobox" aria-expanded="true" aria-controls="${this.key}-list" aria-autocomplete="list" aria-label="${esc(title)}" placeholder="${esc(this.getAttribute("placeholder") ?? "جستجوی دستور یا صفحه…")}" autocomplete="off"></div><ul id="${this.key}-list" role="listbox" aria-label="${esc(title)}" class="k-listbox k-listbox--inline k-command__list"></ul><div class="k-command__footer" aria-hidden="true"><span><kbd class="k-kbd">↑</kbd><kbd class="k-kbd">↓</kbd>حرکت</span><span><kbd class="k-kbd">Enter</kbd>انتخاب</span><span><kbd class="k-kbd">Esc</kbd>بستن</span></div><span class="k-sr-only" aria-live="polite"></span>`;
+        d.innerHTML = `<div class="k-input"><span class="k-input__addon">${SEARCH}</span><input class="k-input__control" type="text" role="combobox" aria-expanded="true" aria-controls="${this.key}-list" aria-autocomplete="list" aria-label="${esc(title)}" placeholder="${esc(this.getAttribute("placeholder") ?? M.command.placeholder)}" autocomplete="off"></div><ul id="${this.key}-list" role="listbox" aria-label="${esc(title)}" class="k-listbox k-listbox--inline k-command__list"></ul><div class="k-command__footer" aria-hidden="true"><span><kbd class="k-kbd">↑</kbd><kbd class="k-kbd">↓</kbd>${esc(M.command.navigate)}</span><span><kbd class="k-kbd">Enter</kbd>${esc(M.command.select)}</span><span><kbd class="k-kbd">Esc</kbd>${esc(M.common.close)}</span></div><span class="k-sr-only" aria-live="polite"></span>`;
         this.append(d);
         this.dialog = d;
         const input = d.querySelector("input");
@@ -152,14 +153,14 @@ export class KashiCommandPalette extends HTMLBase {
                 last = it.group;
                 return `${header}<li id="${this.key}-list-${i}" data-i="${i}" role="option" aria-selected="${i === this.active}"${i === this.active ? " data-active" : ""} class="k-option"><span class="k-option__body"><span>${mark(it.label)}</span>${it.description ? `<span class="k-option__desc">${esc(it.description)}</span>` : ""}</span>${it.shortcut ? `<span class="k-menu__shortcut" aria-hidden="true">${esc(it.shortcut)}</span>` : ""}</li>`;
             }).join("")
-            : '<li role="presentation" class="k-listbox__empty">دستوری پیدا نشد.</li>';
+            : `<li role="presentation" class="k-listbox__empty">${esc(msg().command.empty)}</li>`;
         const input = d.querySelector("input");
         if (list.length)
             input.setAttribute("aria-activedescendant", `${this.key}-list-${this.active}`);
         else
             input.removeAttribute("aria-activedescendant");
         d.querySelector(`#${this.key}-list-${this.active}`)?.scrollIntoView?.({ block: "nearest" });
-        d.querySelector(":scope > .k-sr-only").textContent = this.query ? `${toFaDigits(list.length)} نتیجه` : "";
+        d.querySelector(":scope > .k-sr-only").textContent = this.query ? msg().common.results(num(this, list.length)) : "";
     }
 }
 KashiCommandPalette.observedAttributes = ["placeholder", "label", "shortcut"];
@@ -192,7 +193,7 @@ export class KashiContextMenu extends HTMLBase {
         this.setAttribute("aria-describedby", `${this.key}-hint`);
         const menu = document.createElement("ul");
         menu.setAttribute("role", "menu");
-        menu.setAttribute("aria-label", this.getAttribute("label") ?? "گزینه‌ها");
+        menu.setAttribute("aria-label", this.getAttribute("label") ?? msg().contextMenu.label);
         menu.className = "k-menu k-menu--context";
         menu.hidden = true;
         for (const el of [...(source?.children ?? [])]) {
@@ -221,7 +222,7 @@ export class KashiContextMenu extends HTMLBase {
             menu.append(li);
         }
         source?.remove();
-        this.insertAdjacentHTML("beforeend", `<span id="${this.key}-hint" class="k-sr-only">برای گزینه‌ها راست‌کلیک کنید یا Shift+F10 را بزنید.</span>`);
+        this.insertAdjacentHTML("beforeend", `<span id="${this.key}-hint" class="k-sr-only">${esc(msg().contextMenu.hint)}</span>`);
         this.append(menu);
         this.menu = menu;
         this.addEventListener("contextmenu", (e) => {
@@ -333,11 +334,12 @@ export class KashiCarousel extends HTMLBase {
         return Math.max(1, this.slides.length - this.perView + 1);
     }
     build() {
-        const label = this.getAttribute("label") ?? "اسلایدر";
+        const M = msg();
+        const label = this.getAttribute("label") ?? M.carousel.slider;
         const children = [...this.children];
         const section = document.createElement("section");
         section.className = "k-carousel";
-        section.setAttribute("aria-roledescription", "اسلایدر");
+        section.setAttribute("aria-roledescription", M.carousel.slider);
         section.setAttribute("aria-label", label);
         section.style.setProperty("--k-carousel-per-view", String(this.perView));
         const track = document.createElement("div");
@@ -348,8 +350,8 @@ export class KashiCarousel extends HTMLBase {
             const s = document.createElement("div");
             s.className = "k-carousel__slide";
             s.setAttribute("role", "group");
-            s.setAttribute("aria-roledescription", "اسلاید");
-            s.setAttribute("aria-label", `${toFaDigits(i + 1)} از ${toFaDigits(children.length)}`);
+            s.setAttribute("aria-roledescription", M.carousel.slide);
+            s.setAttribute("aria-label", M.carousel.slideOf(num(this, i + 1), num(this, children.length)));
             s.id = `${this.key}-s${i}`;
             s.append(c);
             track.append(s);
@@ -359,7 +361,7 @@ export class KashiCarousel extends HTMLBase {
         this.track = track;
         if (this.pages > 1) {
             const dots = this.getAttribute("dots") !== "false";
-            section.insertAdjacentHTML("beforeend", `<div class="k-carousel__bar">${dots ? `<ul class="k-carousel__dots" aria-label="اسلایدهای ${esc(label)}">${Array.from({ length: this.pages }, (_, i) => `<li><button type="button" class="k-carousel__dot" data-go="${i}" aria-label="${toFaDigits(i + 1)} از ${toFaDigits(this.pages)}" aria-controls="${this.key}-s${i}"></button></li>`).join("")}</ul>` : "<span></span>"}<div class="k-carousel__nav"><button type="button" class="k-btn k-btn--secondary k-btn--icon k-btn--sm" data-step="-1" aria-label="قبلی">${ARROW(false)}</button><button type="button" class="k-btn k-btn--secondary k-btn--icon k-btn--sm" data-step="1" aria-label="بعدی">${ARROW(true)}</button></div></div>`);
+            section.insertAdjacentHTML("beforeend", `<div class="k-carousel__bar">${dots ? `<ul class="k-carousel__dots" aria-label="${esc(M.carousel.slides(label))}">${Array.from({ length: this.pages }, (_, i) => `<li><button type="button" class="k-carousel__dot" data-go="${i}" aria-label="${esc(M.carousel.slideOf(num(this, i + 1), num(this, this.pages)))}" aria-controls="${this.key}-s${i}"></button></li>`).join("")}</ul>` : "<span></span>"}<div class="k-carousel__nav"><button type="button" class="k-btn k-btn--secondary k-btn--icon k-btn--sm" data-step="-1" aria-label="${esc(M.common.prev)}">${ARROW(false)}</button><button type="button" class="k-btn k-btn--secondary k-btn--icon k-btn--sm" data-step="1" aria-label="${esc(M.common.next)}">${ARROW(true)}</button></div></div>`);
             section.querySelector(".k-carousel__bar").addEventListener("click", (e) => {
                 const b = e.target.closest("button");
                 if (!b)
@@ -701,7 +703,7 @@ export class KashiTour extends HTMLBase {
             });
             document.body.append(this.card);
         }
-        this.card.innerHTML = `<span class="k-tour__step">مرحلهٔ ${toFaDigits(this.i + 1)} از ${toFaDigits(n)}</span><p class="k-tour__title" id="${this.key}-t">${esc(s.title)}</p><p class="k-tour__body" id="${this.key}-b">${esc(s.content)}</p><div class="k-tour__actions"><button type="button" class="k-btn k-btn--link k-tour__skip" data-act="skip">رد کردن</button><span class="k-tour__progress" aria-hidden="true">${this.steps.map((_, k) => `<span${k <= this.i ? ' data-on=""' : ""}></span>`).join("")}</span>${this.i > 0 ? '<button type="button" class="k-btn k-btn--secondary k-btn--sm" data-act="prev">قبلی</button>' : ""}<button type="button" class="k-btn k-btn--primary k-btn--sm" data-act="${last ? "done" : "next"}">${last ? "تمام" : "بعدی"}</button></div>`;
+        this.card.innerHTML = `<span class="k-tour__step">${esc(msg().tour.step(num(this, this.i + 1), num(this, n)))}</span><p class="k-tour__title" id="${this.key}-t">${esc(s.title)}</p><p class="k-tour__body" id="${this.key}-b">${esc(s.content)}</p><div class="k-tour__actions"><button type="button" class="k-btn k-btn--link k-tour__skip" data-act="skip">${esc(msg().tour.skip)}</button><span class="k-tour__progress" aria-hidden="true">${this.steps.map((_, k) => `<span${k <= this.i ? ' data-on=""' : ""}></span>`).join("")}</span>${this.i > 0 ? '<button type="button" class="k-btn k-btn--secondary k-btn--sm" data-act="prev">${esc(msg().common.prev)}</button>' : ""}<button type="button" class="k-btn k-btn--primary k-btn--sm" data-act="${last ? "done" : "next"}">${esc(last ? msg().tour.done : msg().common.next)}</button></div>`;
         const el = document.querySelector(s.target);
         const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
         el?.scrollIntoView?.({ block: "center", behavior: reduce ? "auto" : "smooth" });
@@ -819,7 +821,7 @@ export class KashiSplitter extends HTMLBase {
         handle.setAttribute("aria-orientation", this.vertical ? "horizontal" : "vertical");
         handle.setAttribute("aria-valuemin", String(this.num("min", 15)));
         handle.setAttribute("aria-valuemax", String(this.num("max", 85)));
-        handle.setAttribute("aria-label", this.getAttribute("label") ?? "تغییر اندازهٔ پنل‌ها");
+        handle.setAttribute("aria-label", this.getAttribute("label") ?? msg().splitter.label);
         this.paint();
     }
     set(p, fire = true) {
@@ -838,7 +840,7 @@ export class KashiSplitter extends HTMLBase {
         pane.style.blockSize = this.vertical ? `${this.current}%` : "";
         const handle = box.querySelector(".k-splitter__handle");
         handle.setAttribute("aria-valuenow", String(this.current));
-        handle.setAttribute("aria-valuetext", `${toFaDigits(Math.round(this.current))}٪`);
+        handle.setAttribute("aria-valuetext", msg().common.percent(num(this, Math.round(this.current))));
     }
 }
 KashiSplitter.observedAttributes = ["size", "min", "max", "orientation", "label", "height"];

package/dist/overlay.js

@@ -1,4 +1,4 @@
-import { HTMLBase, ICONS, afterParse, bool, define, emit, esc, uid } from "./base.js";
+import { afterParse, bool, define, emit, esc, HTMLBase, ICONS, msg, uid } from "./base.js";
 /**
  * پنجرهٔ گفتگو روی <dialog> بومی با showModal: فوکوس داخل پنجره می‌ماند، Esc می‌بندد،
  * بقیهٔ صفحه از دسترس صفحه‌خوان خارج می‌شود و پس از بستن، فوکوس به دکمهٔ بازکننده برمی‌گردد.
@@ -100,7 +100,7 @@ export class KashiDialog extends HTMLBase {
             d.setAttribute("aria-describedby", desc.id);
         else
             d.removeAttribute("aria-describedby");
-        d.querySelector(".k-dialog__close").setAttribute("aria-label", this.getAttribute("close-label") ?? "بستن");
+        d.querySelector(".k-dialog__close").setAttribute("aria-label", this.getAttribute("close-label") ?? msg().common.close);
     }
     sync() {
         const d = this.dialog;
@@ -387,9 +387,9 @@ export class KashiCopyButton extends HTMLBase {
         }, Number(this.getAttribute("timeout")) || 2000);
     }
     render() {
-        const copy = this.getAttribute("label") ?? "کپی";
-        const copied = this.getAttribute("copied-label") ?? "کپی شد";
-        const text = this.state === "copied" ? copied : this.state === "failed" ? "کپی نشد" : copy;
+        const copy = this.getAttribute("label") ?? msg().copy.copy;
+        const copied = this.getAttribute("copied-label") ?? msg().copy.copied;
+        const text = this.state === "copied" ? copied : this.state === "failed" ? msg().copy.failed : copy;
         const iconOnly = bool(this, "icon-only");
         const icon = this.state === "copied" ? ICONS.check : ICONS.copy;
         const variant = this.getAttribute("variant") ?? "secondary";

package/dist/pickers.d.ts

@@ -48,7 +48,7 @@ export declare class KashiMonthPicker extends HTMLBase {
     private out;
     private render;
 }
-/** حجم فایل به فارسی: «۱٫۲ مگابایت» */
+/** حجم فایل به زبان فعلی: «۱٫۲ مگابایت» یا «1.2 MB» */
 export declare function formatBytes(bytes: number): string;
 /**
  * بارگذاری فایل با کشیدن و رها کردن، بررسی نوع و حجم و فهرست فایل‌ها.