@kashi-ui/elements 0.26.0 → 1.1.0

package/dist/combobox.d.ts

@@ -32,8 +32,8 @@ export declare class KashiCombobox extends HTMLBase {
     private listbox;
     private live;
     /** برچسب پیش‌فرض وقتی label داده نشود */
-    protected defaultLabel: string | null;
-    protected defaultPlaceholder: string;
+    protected get defaultLabel(): string | null;
+    protected get defaultPlaceholder(): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, old: string | null, next: string | null): void;
@@ -71,8 +71,8 @@ export declare class KashiCombobox extends HTMLBase {
 /** انتخاب یکی از ۳۱ استان با جستجو؛ با نام مرکز استان هم پیدا می‌شود (مثلاً «مشهد») */
 export declare class KashiProvinceSelect extends KashiCombobox {
     static observedAttributes: string[];
-    protected defaultLabel: string;
-    protected defaultPlaceholder: string;
+    protected get defaultLabel(): string;
+    protected get defaultPlaceholder(): string;
     protected source(): ComboboxOption[];
     protected detail(): {
         value: string;
@@ -85,7 +85,8 @@ export declare class KashiProvinceSelect extends KashiCombobox {
  */
 export declare class KashiCitySelect extends KashiCombobox {
     static observedAttributes: string[];
-    protected defaultLabel: string;
+    protected get defaultLabel(): string;
+    protected get defaultPlaceholder(): string;
     private custom;
     get province(): string | null;
     set province(p: string | null);

package/dist/combobox.js

@@ -1,5 +1,5 @@
-import { CITIES, PROVINCES, getCities, normalizePersian, toFaDigits } from "@kashi-ui/persian";
-import { HTMLBase, afterParse, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+import { CITIES, PROVINCES, getCities, normalizePersian } from "@kashi-ui/persian";
+import { afterParse, define, emit, esc, fieldHTML, HTMLBase, msg, num, setMessages, syncHidden, uid } from "./base.js";
 /** متن یکدست برای جستجو: ي/ی، ك/ک، ارقام، حروف کوچک */
 export const searchText = (s) => normalizePersian(s, { digits: "latin" }).toLowerCase();
 /** بیشترین تعداد گزینهٔ رسم‌شده؛ برای فهرست‌های بلند مثل ۱۲۰۰ شهر، بقیه با تایپ پیدا می‌شوند */
@@ -24,14 +24,18 @@ export class KashiCombobox extends HTMLBase {
         this.rendered = false;
         this.valueSet = false;
         this.key = uid("kashi-combo");
-        /** برچسب پیش‌فرض وقتی label داده نشود */
-        this.defaultLabel = null;
-        this.defaultPlaceholder = "";
         this.onOutside = (e) => {
             if (!this.contains(e.target))
                 this.close();
         };
     }
+    /** برچسب پیش‌فرض وقتی label داده نشود */
+    get defaultLabel() {
+        return null;
+    }
+    get defaultPlaceholder() {
+        return "";
+    }
     connectedCallback() {
         afterParse(() => {
             if (!this.isConnected)
@@ -135,7 +139,7 @@ export class KashiCombobox extends HTMLBase {
         const required = this.hasAttribute("required");
         const disabled = this.hasAttribute("disabled");
         const listId = `${id}-list`;
-        const control = `<div class="k-combobox"><div class="k-input"${disabled ? ' data-state="disabled"' : ""}><input id="${id}" class="k-input__control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="${listId}" autocomplete="off" placeholder="${esc(this.getAttribute("placeholder") ?? this.defaultPlaceholder)}"${required ? " required" : ""}${disabled ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}><button type="button" tabindex="-1" class="k-input__action k-combobox__toggle" aria-label="نمایش گزینه‌ها"${disabled ? " disabled" : ""}>${CHEVRON}</button></div><ul id="${listId}" role="listbox" class="k-listbox" hidden style="inset-block-start: calc(100% + 6px)"${label ? ` aria-label="${esc(label)}"` : ` aria-labelledby="${id}"`}></ul><span class="k-sr-only" aria-live="polite"></span></div>`;
+        const control = `<div class="k-combobox"><div class="k-input"${disabled ? ' data-state="disabled"' : ""}><input id="${id}" class="k-input__control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="${listId}" autocomplete="off" placeholder="${esc(this.getAttribute("placeholder") ?? this.defaultPlaceholder)}"${required ? " required" : ""}${disabled ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}><button type="button" tabindex="-1" class="k-input__action k-combobox__toggle" aria-label="${esc(msg().combobox.toggle)}"${disabled ? " disabled" : ""}>${CHEVRON}</button></div><ul id="${listId}" role="listbox" class="k-listbox" hidden style="inset-block-start: calc(100% + 6px)"${label ? ` aria-label="${esc(label)}"` : ` aria-labelledby="${id}"`}></ul><span class="k-sr-only" aria-live="polite"></span></div>`;
         this.querySelector(":scope > .k-field")?.remove();
         this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, required, control }));
         this.input = this.querySelector("input.k-input__control");
@@ -249,11 +253,11 @@ export class KashiCombobox extends HTMLBase {
             return `${header}<li id="${listId}-${i}" data-i="${i}" role="option" aria-selected="${on}"${o.disabled ? ' aria-disabled="true"' : ""}${i === this.active ? " data-active" : ""} class="k-option"><span class="k-option__body"><span>${mark(o.label)}</span>${o.description ? `<span class="k-option__desc">${esc(o.description)}</span>` : ""}</span>${on ? `<span class="k-option__check">${CHECK}</span>` : ""}</li>`;
         });
         if (!this.filtered.length)
-            items.push(`<li class="k-listbox__empty" role="presentation">${esc(this.getAttribute("empty-message") ?? "نتیجه‌ای پیدا نشد.")}</li>`);
+            items.push(`<li class="k-listbox__empty" role="presentation">${esc(this.getAttribute("empty-message") ?? msg().common.noResults)}</li>`);
         if (this.filtered.length > MAX_RENDER)
-            items.push(`<li class="k-listbox__empty" role="presentation">${toFaDigits(this.filtered.length - MAX_RENDER)} گزینهٔ دیگر؛ برای پیدا کردن تایپ کنید.</li>`);
+            items.push(`<li class="k-listbox__empty" role="presentation">${esc(msg().combobox.more(num(this, this.filtered.length - MAX_RENDER)))}</li>`);
         this.listbox.innerHTML = items.join("");
-        this.live.textContent = this.typing ? `${toFaDigits(this.filtered.length)} نتیجه` : "";
+        this.live.textContent = this.typing ? msg().common.results(num(this, this.filtered.length)) : "";
         this.setActive(this.active);
     }
     setActive(i) {
@@ -319,14 +323,15 @@ export class KashiCombobox extends HTMLBase {
 KashiCombobox.observedAttributes = ["label", "hint", "error", "placeholder", "required", "disabled", "name", "value", "empty-message", "aria-label"];
 /** انتخاب یکی از ۳۱ استان با جستجو؛ با نام مرکز استان هم پیدا می‌شود (مثلاً «مشهد») */
 export class KashiProvinceSelect extends KashiCombobox {
-    constructor() {
-        super(...arguments);
-        this.defaultLabel = "استان";
-        this.defaultPlaceholder = "جستجوی استان یا شهر";
+    get defaultLabel() {
+        return msg().province.label;
+    }
+    get defaultPlaceholder() {
+        return msg().province.search;
     }
     source() {
         const capital = this.getAttribute("show-capital") !== "false";
-        return PROVINCES.map((p) => ({ value: p.name, label: p.name, description: capital ? `مرکز: ${p.capital}` : undefined, keywords: [p.capital] }));
+        return PROVINCES.map((p) => ({ value: p.name, label: p.name, description: capital ? msg().province.capital(p.capital) : undefined, keywords: [p.capital] }));
     }
     detail() {
         return { value: this.value, province: PROVINCES.find((p) => p.name === this.value) ?? null };
@@ -343,9 +348,14 @@ const loose = (s) => searchText(s).replace(/[\s‌]/g, "");
 export class KashiCitySelect extends KashiCombobox {
     constructor() {
         super(...arguments);
-        this.defaultLabel = "شهر";
         this.custom = null;
     }
+    get defaultLabel() {
+        return msg().city.label;
+    }
+    get defaultPlaceholder() {
+        return this.placeholderText();
+    }
     get province() {
         return this.getAttribute("province") || null;
     }
@@ -367,7 +377,7 @@ export class KashiCitySelect extends KashiCombobox {
         let o = city ? (list.find((x) => x.label === city && (!p || x.value.startsWith(`${p}${SEP}`))) ?? null) : null;
         if (city && !o) {
             this.custom = city;
-            o = { value: `custom${SEP}${city}`, label: city, description: "خارج از فهرست" };
+            o = { value: `custom${SEP}${city}`, label: city, description: msg().city.outside };
         }
         this.selected = o;
         this.query = o?.label ?? "";
@@ -403,11 +413,10 @@ export class KashiCitySelect extends KashiCombobox {
         }
     }
     connectedCallback() {
-        this.defaultPlaceholder = this.placeholderText();
         super.connectedCallback();
     }
     placeholderText() {
-        return this.province ? "جستجوی شهر" : "نام شهر، مثلاً کاشان";
+        return this.province ? msg().city.search : msg().city.hint;
     }
     source(query) {
         const p = this.province;
@@ -415,10 +424,10 @@ export class KashiCitySelect extends KashiCombobox {
             ? getCities(p).map((c) => ({ value: `${p}${SEP}${c}`, label: c }))
             : Object.entries(CITIES).flatMap(([prov, cities]) => cities.map((c) => ({ value: `${prov}${SEP}${c}`, label: c, description: prov })));
         if (this.custom)
-            list.unshift({ value: `custom${SEP}${this.custom}`, label: this.custom, description: "خارج از فهرست" });
+            list.unshift({ value: `custom${SEP}${this.custom}`, label: this.custom, description: msg().city.outside });
         const q = query.trim();
         if (this.getAttribute("allow-custom") !== "false" && q && q !== this.custom && !list.some((o) => loose(o.label) === loose(q)))
-            list.push({ value: `custom${SEP}${q}`, label: q, description: "شهر دیگر؛ همین نام ثبت شود" });
+            list.push({ value: `custom${SEP}${q}`, label: q, description: msg().city.custom });
         return list;
     }
     accepts(o, q) {

package/dist/controls.js

@@ -1,5 +1,5 @@
 import { formatNumber, normalizePersian, onlyDigits, toEnDigits, toFaDigits } from "@kashi-ui/persian";
-import { HTMLBase, bool, define, emit, esc, fieldHTML, setMessages, uid } from "./base.js";
+import { bool, define, digitsOf, emit, esc, fieldHTML, HTMLBase, msg, num, setMessages, uid } from "./base.js";
 const REMOVE = '<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>';
 /** چند فیلد پنهان با یک name، برای ارسال چند مقدار در فرم HTML */
 function syncHiddenList(host, name, values) {
@@ -60,7 +60,7 @@ export class KashiTagInput 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().tagInput.label;
         const control = `<div class="k-tag-input"><input id="${id}" class="k-tag-input__control"${this.hasAttribute("disabled") ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}></div><span class="k-sr-only" aria-live="polite"></span>`;
         this.querySelector(":scope > .k-field")?.remove();
         this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, control }));
@@ -107,7 +107,7 @@ export class KashiTagInput extends HTMLBase {
             const t = normalizePersian(r).trim();
             if (!t)
                 continue;
-            const err = next.length >= max ? `حداکثر ${toFaDigits(max)} مورد` : !dup && next.includes(t) ? "این مورد قبلاً اضافه شده است." : this.validate?.(t);
+            const err = next.length >= max ? msg().common.max(num(this, max)) : !dup && next.includes(t) ? msg().tagInput.duplicate : this.validate?.(t);
             if (err) {
                 this.localError = err;
                 this.commit(next, added);
@@ -115,7 +115,7 @@ export class KashiTagInput extends HTMLBase {
                 return;
             }
             next = [...next, t];
-            added = `${t} اضافه شد`;
+            added = msg().common.added(t);
         }
         this.localError = null;
         this.input.value = "";
@@ -123,7 +123,7 @@ export class KashiTagInput extends HTMLBase {
     }
     removeAt(i) {
         const t = this.tags[i];
-        this.commit(this.tags.filter((_, j) => j !== i), `${t} حذف شد`);
+        this.commit(this.tags.filter((_, j) => j !== i), msg().common.removed(t));
         this.input.focus();
     }
     commit(next, announce) {
@@ -140,7 +140,7 @@ export class KashiTagInput extends HTMLBase {
         box.querySelectorAll(".k-badge").forEach((b) => b.remove());
         const tone = this.getAttribute("tone") ?? "brand";
         const off = this.hasAttribute("disabled");
-        const badges = this.tags.map((t, i) => `<span class="k-badge${tone !== "neutral" ? ` k-badge--${esc(tone)}` : ""}${off ? "" : " k-badge--removable"}">${esc(t)}${off ? "" : `<button type="button" class="k-badge__remove" data-i="${i}" aria-label="حذف ${esc(t)}">${REMOVE}</button>`}</span>`).join("");
+        const badges = this.tags.map((t, i) => `<span class="k-badge${tone !== "neutral" ? ` k-badge--${esc(tone)}` : ""}${off ? "" : " k-badge--removable"}">${esc(t)}${off ? "" : `<button type="button" class="k-badge__remove" data-i="${i}" aria-label="${esc(msg().common.remove(t))}">${REMOVE}</button>`}</span>`).join("");
         this.input.insertAdjacentHTML("beforebegin", badges);
         this.input.placeholder = this.tags.length ? "" : (this.getAttribute("placeholder") ?? "");
         this.paintMessages();
@@ -205,15 +205,15 @@ export class KashiNumberInput extends HTMLBase {
         if (n === null)
             return "";
         const s = this.hasAttribute("thousands") ? formatNumber(n, { digits: "latin" }) : String(n);
-        return this.getAttribute("digits") === "latin" ? s : toFaDigits(s).replace(/,/g, "٬");
+        return digitsOf(this) === "latin" ? s : toFaDigits(s).replace(/,/g, "٬");
     }
     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().numberInput.label;
         const disabled = this.hasAttribute("disabled");
         const unit = this.getAttribute("unit");
-        const control = `<div class="k-number"><div class="k-input"${disabled ? ' data-state="disabled"' : ""}><button type="button" class="k-number__step" data-step="-1" tabindex="-1" aria-label="کاهش"${disabled ? " disabled" : ""}>${MINUS}</button><input id="${id}" class="k-input__control" type="text" inputmode="decimal" role="spinbutton" dir="ltr"${disabled ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}>${unit ? `<span class="k-input__addon">${esc(unit)}</span>` : ""}<button type="button" class="k-number__step" data-step="1" tabindex="-1" aria-label="افزایش"${disabled ? " disabled" : ""}>${PLUS}</button></div></div>`;
+        const control = `<div class="k-number"><div class="k-input"${disabled ? ' data-state="disabled"' : ""}><button type="button" class="k-number__step" data-step="-1" tabindex="-1" aria-label="${esc(msg().numberInput.decrement)}"${disabled ? " disabled" : ""}>${MINUS}</button><input id="${id}" class="k-input__control" type="text" inputmode="decimal" role="spinbutton" dir="ltr"${disabled ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}>${unit ? `<span class="k-input__addon">${esc(unit)}</span>` : ""}<button type="button" class="k-number__step" data-step="1" tabindex="-1" aria-label="${esc(msg().numberInput.increment)}"${disabled ? " disabled" : ""}>${PLUS}</button></div></div>`;
         this.querySelector(":scope > .k-field")?.remove();
         this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, control }));
         this.input = this.querySelector("input.k-input__control");
@@ -290,7 +290,6 @@ export class KashiNumberInput extends HTMLBase {
 }
 KashiNumberInput.observedAttributes = ["label", "hint", "error", "value", "min", "max", "step", "thousands", "digits", "unit", "disabled", "name", "aria-label"];
 const STAR = '<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1l-5.7 3.1 1.2-6.3L2.8 9.5l6.4-.8z"/><path class="k-rating__half" fill="none" d="M12 2.8v14.3l-5.7 3.1 1.2-6.3L2.8 9.5l6.4-.8z"/></svg>';
-const faNum = (n) => toFaDigits(String(n)).replace(".", "٫");
 /** امتیاز ستاره‌ای روی رادیوهای بومی؛ با readonly فقط نمایش (با نیم‌ستاره برای امتیاز اعشاری) */
 export class KashiRating extends HTMLBase {
     constructor() {
@@ -322,19 +321,20 @@ export class KashiRating extends HTMLBase {
     }
     render() {
         const max = Number(this.getAttribute("max")) || 5;
-        const label = this.getAttribute("label") ?? "امتیاز";
+        const label = this.getAttribute("label") ?? msg().rating.label;
+        const faNum = (x) => num(this, x).replace(".", msg().common.decimal);
         const size = this.getAttribute("size");
         const cls = `k-rating${size === "sm" || size === "lg" ? ` k-rating--${size}` : ""}`;
         const c = this.current;
         const stars = Array.from({ length: max }, (_, i) => i + 1);
         const valueHtml = this.hasAttribute("show-value") ? `<span class="k-rating__value" aria-hidden="true">${faNum(c)}</span>` : "";
         if (this.hasAttribute("readonly")) {
-            this.innerHTML = `<span class="${cls}" data-readonly="" role="img" aria-label="${esc(`${label}: ${faNum(c)} از ${faNum(max)}`)}">${stars.map((n) => `<span class="k-rating__star"${n <= Math.floor(c) ? ' data-filled=""' : ""}${n === Math.ceil(c) && c % 1 >= 0.25 ? ' data-half=""' : ""}>${STAR}</span>`).join("")}${valueHtml}</span>`;
+            this.innerHTML = `<span class="${cls}" data-readonly="" role="img" aria-label="${esc(`${label}: ${msg().common.of(faNum(c), faNum(max))}`)}">${stars.map((n) => `<span class="k-rating__star"${n <= Math.floor(c) ? ' data-filled=""' : ""}${n === Math.ceil(c) && c % 1 >= 0.25 ? ' data-half=""' : ""}>${STAR}</span>`).join("")}${valueHtml}</span>`;
             return;
         }
         const name = this.getAttribute("name") ?? this.key;
         const off = this.hasAttribute("disabled");
-        this.innerHTML = `<fieldset class="${cls}"><legend class="k-sr-only">${esc(label)}</legend>${stars.map((n) => `<label class="k-rating__star"${n <= c ? ' data-filled=""' : ""}><input type="radio" class="k-sr-only" name="${esc(name)}" value="${n}"${c === n ? " checked" : ""}${off ? " disabled" : ""} aria-label="${faNum(n)} از ${faNum(max)}">${STAR}</label>`).join("")}${valueHtml}</fieldset>`;
+        this.innerHTML = `<fieldset class="${cls}"><legend class="k-sr-only">${esc(label)}</legend>${stars.map((n) => `<label class="k-rating__star"${n <= c ? ' data-filled=""' : ""}><input type="radio" class="k-sr-only" name="${esc(name)}" value="${n}"${c === n ? " checked" : ""}${off ? " disabled" : ""} aria-label="${esc(msg().common.of(faNum(n), faNum(max)))}">${STAR}</label>`).join("")}${valueHtml}</fieldset>`;
         const fs = this.querySelector("fieldset");
         const fill = (upto) => fs.querySelectorAll(".k-rating__star").forEach((s, i) => s.toggleAttribute("data-filled", i + 1 <= upto));
         fs.addEventListener("change", (e) => {
@@ -390,14 +390,14 @@ export class KashiPagination extends HTMLBase {
     }
     render() {
         const page = Math.min(this.page, this.total), total = this.total;
-        const n = (v) => (this.getAttribute("digits") === "latin" ? String(v) : toFaDigits(v));
+        const n = (v) => (digitsOf(this) === "latin" ? String(v) : toFaDigits(v));
         const href = this.getAttribute("href");
         const focused = this.contains(document.activeElement) ? document.activeElement.dataset.to : null;
         const item = (to, body, cls, { current = false, disabled = false, aria = "" } = {}) => href && !disabled
             ? `<a class="${cls}" href="${esc(href.replace("{page}", String(to)))}" data-to="${to}"${current ? ' aria-current="page"' : ""}${aria ? ` aria-label="${esc(aria)}"` : ""}>${body}</a>`
             : `<button type="button" class="${cls}" data-to="${to}"${disabled ? " disabled" : ""}${current ? ' aria-current="page"' : ""}${aria ? ` aria-label="${esc(aria)}"` : ""}>${body}</button>`;
         const summary = this.getAttribute("summary");
-        this.innerHTML = `<nav class="k-pagination" aria-label="${esc(this.getAttribute("label") ?? "صفحه‌بندی")}">${item(page - 1, `${chevron("m12 5-5 5 5 5")}قبلی`, "k-btn k-btn--secondary k-btn--sm", { disabled: page <= 1 })}${summary ? `<span class="k-pagination__summary">${esc(summary)}</span>` : ""}<ul class="k-pagination__pages" role="list">${pageRange(page, total, Number(this.getAttribute("siblings") ?? 1)).map((p) => `<li>${p === null ? '<span class="k-pagination__ellipsis" aria-hidden="true">…</span>' : item(p, n(p), "k-pagination__page", { current: p === page, aria: `صفحهٔ ${n(p)}` })}</li>`).join("")}</ul>${item(page + 1, `بعدی${chevron("m8 5 5 5-5 5")}`, "k-btn k-btn--secondary k-btn--sm", { disabled: page >= total })}</nav>`;
+        this.innerHTML = `<nav class="k-pagination" aria-label="${esc(this.getAttribute("label") ?? msg().pagination.nav)}">${item(page - 1, `${chevron("m12 5-5 5 5 5")}${esc(msg().common.prev)}`, "k-btn k-btn--secondary k-btn--sm", { disabled: page <= 1 })}${summary ? `<span class="k-pagination__summary">${esc(summary)}</span>` : ""}<ul class="k-pagination__pages" role="list">${pageRange(page, total, Number(this.getAttribute("siblings") ?? 1)).map((p) => `<li>${p === null ? '<span class="k-pagination__ellipsis" aria-hidden="true">…</span>' : item(p, n(p), "k-pagination__page", { current: p === page, aria: msg().pagination.page(n(p)) })}</li>`).join("")}</ul>${item(page + 1, `${esc(msg().common.next)}${chevron("m8 5 5 5-5 5")}`, "k-btn k-btn--secondary k-btn--sm", { disabled: page >= total })}</nav>`;
         this.querySelector("nav").addEventListener("click", (e) => {
             const b = e.target.closest("button[data-to]");
             if (!b || b.disabled)

package/dist/display.js

@@ -1,5 +1,5 @@
 import { formatJalali, formatMoney, formatRelative, fromISODate, numberToWords, rialToToman, toFaDigits, tomanToRial } from "@kashi-ui/persian";
-import { HTMLBase, define, emit, esc } from "./base.js";
+import { define, digitsOf, emit, esc, HTMLBase, lang, msg } from "./base.js";
 /** «2026-03-21» به نیمه‌شب محلی، و بقیهٔ قالب‌ها (با ساعت) با Date */
 const parseDateTime = (text) => {
     if (!text)
@@ -24,19 +24,21 @@ export class KashiMoney extends Display {
         const unit = this.getAttribute("unit") === "rial" ? "rial" : "toman";
         const from = this.getAttribute("from") === "rial" ? "rial" : this.getAttribute("from") === "toman" ? "toman" : unit;
         const compact = this.hasAttribute("compact");
-        const digits = this.getAttribute("digits") === "latin" ? "latin" : "fa";
+        const digits = digitsOf(this);
         const signed = this.hasAttribute("signed");
         const size = this.getAttribute("size") ?? "md";
         const n = from === unit ? value : from === "rial" ? rialToToman(value) : tomanToRial(value);
-        const amount = formatMoney(n, { unit, compact, digits, showUnit: false });
-        const full = formatMoney(n, { unit, compact });
-        const unitText = full.endsWith("همت") ? null : unit === "toman" ? "تومان" : "ریال";
+        const locale = lang(), M = msg();
+        const amount = formatMoney(n, { unit, compact, digits, locale, showUnit: false });
+        const full = formatMoney(n, { unit, compact, locale });
+        const unitName = unit === "toman" ? M.money.toman : M.money.rial;
+        const unitText = full.endsWith("همت") ? null : unitName;
         const spoken = this.getAttribute("words") !== "false" && Number.isSafeInteger(Math.round(n))
-            ? `${numberToWords(Math.round(n))} ${unit === "toman" ? "تومان" : "ریال"}`
+            ? `${numberToWords(Math.round(n), { locale })} ${unitName}`
             : null;
         const tone = signed ? (n > 0 ? "positive" : n < 0 ? "negative" : null) : null;
         const hide = spoken ? ' aria-hidden="true"' : "";
-        this.innerHTML = `<data value="${n}" class="k-money k-money--${esc(size)}"${tone ? ` data-tone="${tone}"` : ""}${spoken ? ` title="${esc(spoken)}"` : ""}><span class="k-money__amount"${hide}>${signed && n > 0 ? "+" : ""}${esc(amount)}</span>${unitText ? `<span class="k-money__unit"${hide}>${unitText}</span>` : ""}${spoken ? `<span class="k-sr-only">${n < 0 ? "" : signed && n > 0 ? "مثبت " : ""}${esc(spoken)}</span>` : ""}</data>`;
+        this.innerHTML = `<data value="${n}" class="k-money k-money--${esc(size)}"${tone ? ` data-tone="${tone}"` : ""}${spoken ? ` title="${esc(spoken)}"` : ""}><span class="k-money__amount"${hide}>${signed && n > 0 ? "+" : ""}${esc(amount)}</span>${unitText ? `<span class="k-money__unit"${hide}>${unitText}</span>` : ""}${spoken ? `<span class="k-sr-only">${n < 0 ? "" : signed && n > 0 ? M.money.positive : ""}${esc(spoken)}</span>` : ""}</data>`;
     }
 }
 KashiMoney.observedAttributes = ["value", "unit", "from", "compact", "digits", "signed", "words", "size"];
@@ -50,8 +52,8 @@ export class KashiDate extends Display {
         }
         const f = this.getAttribute("format");
         const style = f === "numeric" || f === "full" ? f : "long";
-        const digits = this.getAttribute("digits") === "latin" ? "latin" : "fa";
-        this.innerHTML = `<time datetime="${esc(this.getAttribute("datetime"))}">${esc(formatJalali(d, { style, digits }))}</time>`;
+        const digits = digitsOf(this);
+        this.innerHTML = `<time datetime="${esc(this.getAttribute("datetime"))}">${esc(formatJalali(d, { style, digits, locale: lang() }))}</time>`;
     }
 }
 KashiDate.observedAttributes = ["datetime", "format", "digits"];
@@ -71,8 +73,8 @@ export class KashiRelativeTime extends Display {
             this.textContent = "";
             return;
         }
-        const digits = this.getAttribute("digits") === "latin" ? "latin" : "fa";
-        this.innerHTML = `<time datetime="${d.toISOString()}" title="${esc(formatJalali(d, { style: "full", digits }))}">${esc(formatRelative(d, { digits }))}</time>`;
+        const digits = digitsOf(this);
+        this.innerHTML = `<time datetime="${d.toISOString()}" title="${esc(formatJalali(d, { style: "full", digits, locale: lang() }))}">${esc(formatRelative(d, { digits, locale: lang() }))}</time>`;
     }
 }
 KashiRelativeTime.observedAttributes = ["datetime", "digits", "refresh"];
@@ -114,14 +116,15 @@ export class KashiCountdown extends HTMLBase {
     render() {
         const left = this.remaining;
         const d = Math.floor(left / 86400), h = Math.floor((left % 86400) / 3600), m = Math.floor((left % 3600) / 60), s = left % 60;
-        const fa = this.getAttribute("digits") !== "latin";
+        const fa = digitsOf(this) === "fa";
         const f = (x) => (fa ? toFaDigits(String(x)) : String(x));
-        const spoken = [d && `${f(d)} روز`, h && `${f(h)} ساعت`, m && `${f(m)} دقیقه`, `${f(s)} ثانیه`].filter(Boolean).join(" و ");
+        const C = msg().countdown;
+        const spoken = [d && `${f(d)} ${C.days}`, h && `${f(h)} ${C.hours}`, m && `${f(m)} ${C.minutes}`, `${f(s)} ${C.seconds}`].filter(Boolean).join(msg().common.and);
         const label = this.getAttribute("label");
         const aria = esc(label ? `${label}: ${spoken}` : spoken);
         const doneAttr = left === 0 ? ' data-done=""' : "";
         if (this.getAttribute("variant") === "blocks") {
-            const units = [...(d ? [[d, "روز"]] : []), [h, "ساعت"], [m, "دقیقه"], [s, "ثانیه"]];
+            const units = [...(d ? [[d, C.days]] : []), [h, C.hours], [m, C.minutes], [s, C.seconds]];
             this.innerHTML = `<div role="timer" aria-label="${aria}" class="k-countdown k-countdown--blocks"${doneAttr}>${units.map(([v, name]) => `<span class="k-countdown__unit" aria-hidden="true"><span class="k-countdown__num">${f(pad(v))}</span><span class="k-countdown__name">${name}</span></span>`).join("")}</div>`;
         }
         else {

package/dist/fields.js

@@ -1,5 +1,5 @@
 import { onlyDigits, toFaDigits } from "@kashi-ui/persian";
-import { HTMLBase, define, emit, esc, fieldHTML, setMessages, syncHidden, uid } from "./base.js";
+import { define, digitsOf, emit, esc, fieldHTML, HTMLBase, msg, setMessages, syncHidden, uid } from "./base.js";
 /**
  * کد تأیید یک‌بارمصرف: یک input واقعی (نه شش input جدا)، پس چسباندن، پاک کردن،
  * صفحه‌خوان و پر شدن خودکار کد پیامکی (autocomplete="one-time-code") کار می‌کنند.
@@ -49,7 +49,7 @@ export class KashiOtp extends HTMLBase {
         const length = this.length;
         const group = Number(this.getAttribute("group-after")) || 0;
         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().otp.label;
         const slots = Array.from({ length }, (_, i) => `${group && i === group ? '<span class="k-otp__sep" aria-hidden="true"></span>' : ""}<span class="k-otp__slot" aria-hidden="true"></span>`).join("");
         const control = `<div class="k-otp${this.getAttribute("size") === "sm" ? " k-otp--sm" : ""}"><input id="${id}" class="k-otp__input" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="\\d*" maxlength="${length * 2}"${this.hasAttribute("disabled") ? " disabled" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}>${slots}</div>`;
         this.querySelector(":scope > .k-field")?.remove();
@@ -88,7 +88,7 @@ export class KashiOtp extends HTMLBase {
     }
     /** فقط خانه‌ها؛ مقدار input را دست نمی‌زند تا تایپ کاربر پیش از رویداد input پاک نشود */
     paintSlots() {
-        const fa = this.getAttribute("digits") !== "latin";
+        const fa = digitsOf(this) === "fa";
         const focused = this.ownerDocument.activeElement === this.input;
         const active = Math.min(this.caret, this.length - 1);
         this.querySelectorAll(".k-otp__slot").forEach((slot, i) => {

package/dist/forms.d.ts

@@ -93,7 +93,7 @@ declare abstract class TextField extends HTMLBase {
     protected valueSet: boolean;
     protected text: string;
     protected abstract multiline: boolean;
-    protected abstract defaultLabel: string;
+    protected abstract get defaultLabel(): string;
     protected abstract hint(): string | null;
     connectedCallback(): void;
     attributeChangedCallback(name: string, old: string | null, next: string | null): void;
@@ -109,7 +109,7 @@ declare abstract class TextField extends HTMLBase {
 export declare class KashiPersianTextarea extends TextField {
     static observedAttributes: string[];
     protected multiline: boolean;
-    protected defaultLabel: string;
+    protected get defaultLabel(): string;
     protected render(): void;
     private result;
     protected hint(): string | null;
@@ -118,7 +118,7 @@ export declare class KashiPersianTextarea extends TextField {
 export declare class KashiKeyboardFix extends TextField {
     static observedAttributes: string[];
     protected multiline: boolean;
-    protected defaultLabel: string;
+    protected get defaultLabel(): string;
     protected render(): void;
     protected hint(): string | null;
 }