@kashi-ui/elements 0.26.0 → 1.0.0

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;
 /**
  * بارگذاری فایل با کشیدن و رها کردن، بررسی نوع و حجم و فهرست فایل‌ها.

package/dist/pickers.js

@@ -1,17 +1,17 @@
-import { JALALI_MONTHS, formatJalali, fromISODate, parseJalali, toFaDigits, toGregorian, toISODate, toJalali } from "@kashi-ui/persian";
-import { HTMLBase, ICONS, bool, define, emit, esc, fieldHTML, setMessages, uid } from "./base.js";
+import { formatJalali, fromISODate, parseJalali, toFaDigits, toGregorian, toISODate, toJalali } from "@kashi-ui/persian";
+import { bool, calendarNames, define, digitsOf, emit, esc, fieldHTML, HTMLBase, ICONS, lang, localeDigits, msg, num, setMessages, uid } from "./base.js";
 import "./calendar.js";
 const parseDate = (t) => (t ? (fromISODate(t.trim()) ?? parseJalali(t)) : null);
 const day = (d, add = 0) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + add);
 const same = (a, b) => (!a && !b) || (!!a && !!b && a.getTime() === b.getTime());
 const PRESETS = [
-    ["۷ روز اخیر", (t) => ({ start: day(t, -6), end: t })],
-    ["۳۰ روز اخیر", (t) => ({ start: day(t, -29), end: t })],
-    ["این ماه", (t) => {
+    [(m, n) => m.last7(n(7)), (t) => ({ start: day(t, -6), end: t })],
+    [(m, n) => m.last30(n(30)), (t) => ({ start: day(t, -29), end: t })],
+    [(m) => m.thisMonth, (t) => {
             const { jy, jm } = toJalali(t);
             return { start: toGregorian(jy, jm, 1), end: t };
         }],
-    ["ماه قبل", (t) => {
+    [(m) => m.lastMonth, (t) => {
             const { jy, jm } = toJalali(t);
             const [py, pm] = jm === 1 ? [jy - 1, 12] : [jy, jm - 1];
             return { start: toGregorian(py, pm, 1), end: day(toGregorian(jy, jm, 1), -1) };
@@ -61,17 +61,17 @@ export class KashiDateRangePicker extends HTMLBase {
             this.render();
     }
     fmt(d) {
-        return formatJalali(d, { digits: this.getAttribute("digits") === "latin" ? "latin" : "fa" });
+        return formatJalali(d, { digits: digitsOf(this), locale: lang() });
     }
     text(r) {
-        return r.start && r.end ? `${this.fmt(r.start)} تا ${this.fmt(r.end)}` : null;
+        return r.start && r.end ? `${this.fmt(r.start)}${msg().common.range}${this.fmt(r.end)}` : null;
     }
     render() {
         this.close(false);
         const id = this.key;
-        const label = this.getAttribute("label") ?? "بازهٔ تاریخ";
+        const label = this.getAttribute("label") ?? msg().dateRange.label;
         const text = this.text(this.current);
-        const control = `<div class="k-datepicker k-daterange"><div class="k-select"><button id="${id}" type="button" class="k-select__control k-daterange__trigger" aria-haspopup="dialog" aria-expanded="false"${text ? "" : ' data-placeholder=""'}${this.hasAttribute("disabled") ? " disabled" : ""}>${ICONS.calendar}<span>${esc(text ?? this.getAttribute("placeholder") ?? "انتخاب بازهٔ تاریخ")}</span></button></div></div>`;
+        const control = `<div class="k-datepicker k-daterange"><div class="k-select"><button id="${id}" type="button" class="k-select__control k-daterange__trigger" aria-haspopup="dialog" aria-expanded="false"${text ? "" : ' data-placeholder=""'}${this.hasAttribute("disabled") ? " disabled" : ""}>${ICONS.calendar}<span>${esc(text ?? this.getAttribute("placeholder") ?? msg().dateRange.placeholder)}</span></button></div></div>`;
         this.querySelector(":scope > .k-field")?.remove();
         this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, control }));
         this.trigger = this.querySelector(".k-daterange__trigger");
@@ -94,9 +94,9 @@ export class KashiDateRangePicker extends HTMLBase {
         pop.id = `${this.key}-popover`;
         pop.className = "k-datepicker__popover k-daterange__popover";
         pop.setAttribute("role", "dialog");
-        pop.setAttribute("aria-label", this.getAttribute("label") ?? "انتخاب بازهٔ تاریخ");
+        pop.setAttribute("aria-label", this.getAttribute("label") ?? msg().dateRange.placeholder);
         const presets = this.getAttribute("presets") === "false" ? [] : PRESETS;
-        pop.innerHTML = `${presets.length ? `<ul class="k-daterange__presets" role="list" aria-label="میان‌برها">${presets.map(([l], i) => `<li><button type="button" class="k-daterange__preset" data-preset="${i}" aria-pressed="false">${l}</button></li>`).join("")}</ul>` : ""}<div class="k-daterange__main"><div class="k-daterange__footer"><span class="k-daterange__summary" aria-live="polite"></span><button type="button" class="k-btn k-btn--secondary k-btn--sm" data-cancel>انصراف</button><button type="button" class="k-btn k-btn--primary k-btn--sm" data-apply>تأیید</button></div></div>`;
+        pop.innerHTML = `${presets.length ? `<ul class="k-daterange__presets" role="list" aria-label="${esc(msg().dateRange.presets)}">${presets.map(([l], i) => `<li><button type="button" class="k-daterange__preset" data-preset="${i}" aria-pressed="false">${esc(l(msg().dateRange, (v) => num(this, v)))}</button></li>`).join("")}</ul>` : ""}<div class="k-daterange__main"><div class="k-daterange__footer"><span class="k-daterange__summary" aria-live="polite"></span><button type="button" class="k-btn k-btn--secondary k-btn--sm" data-cancel>${esc(msg().common.cancel)}</button><button type="button" class="k-btn k-btn--primary k-btn--sm" data-apply>${esc(msg().common.confirm)}</button></div></div>`;
         const cal = document.createElement("kashi-calendar");
         for (const a of ["min", "max", "digits", "holidays"]) {
             const v = this.getAttribute(a);
@@ -150,7 +150,7 @@ export class KashiDateRangePicker extends HTMLBase {
     paintDraft() {
         const pop = this.pop;
         const r = this.draft;
-        pop.querySelector(".k-daterange__summary").textContent = this.text(r) ?? (r.start ? "حالا تاریخ پایان را انتخاب کنید." : "");
+        pop.querySelector(".k-daterange__summary").textContent = this.text(r) ?? (r.start ? msg().dateRange.pickEnd : "");
         pop.querySelector("[data-apply]").disabled = !r.start || !r.end;
         const today = day(new Date());
         pop.querySelectorAll("[data-preset]").forEach((b, i) => {
@@ -222,11 +222,11 @@ export class KashiMonthPicker extends HTMLBase {
         return (!!min && k < min.year * 12 + min.month) || (!!max && k > max.year * 12 + max.month);
     }
     render(focus = false) {
-        const f = (n) => (this.getAttribute("digits") === "latin" ? String(n) : toFaDigits(String(n)));
+        const f = (n) => (digitsOf(this) === "latin" ? String(n) : toFaDigits(String(n)));
         const t = toJalali(new Date());
         const min = this.parse(this.getAttribute("min")), max = this.parse(this.getAttribute("max"));
         const y = this.year;
-        this.innerHTML = `<div class="k-monthpicker" role="group" aria-label="${esc(this.getAttribute("label") ?? "انتخاب ماه")}"><div class="k-monthpicker__header"><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm" data-year="-1" aria-label="سال قبل"${min && y <= min.year ? " disabled" : ""}>${ARROW(false)}</button><span class="k-monthpicker__year" aria-live="polite">${f(y)}</span><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm" data-year="1" aria-label="سال بعد"${max && y >= max.year ? " disabled" : ""}>${ARROW(true)}</button></div><div class="k-monthpicker__grid">${JALALI_MONTHS.map((name, i) => `<button type="button" data-month="${i + 1}" class="k-monthpicker__month" tabindex="${this.focusMonth === i + 1 ? 0 : -1}" aria-pressed="${this.selected?.year === y && this.selected.month === i + 1}" aria-label="${name} ${f(y)}"${t.jy === y && t.jm === i + 1 ? ' aria-current="date"' : ""}${this.out(y, i + 1) ? " disabled" : ""}>${name}</button>`).join("")}</div></div>`;
+        this.innerHTML = `<div class="k-monthpicker" role="group" aria-label="${esc(this.getAttribute("label") ?? msg().monthPicker.label)}"><div class="k-monthpicker__header"><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm" data-year="-1" aria-label="${esc(msg().monthPicker.prevYear)}"${min && y <= min.year ? " disabled" : ""}>${ARROW(false)}</button><span class="k-monthpicker__year" aria-live="polite">${f(y)}</span><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm" data-year="1" aria-label="${esc(msg().monthPicker.nextYear)}"${max && y >= max.year ? " disabled" : ""}>${ARROW(true)}</button></div><div class="k-monthpicker__grid">${calendarNames().months.map((name, i) => `<button type="button" data-month="${i + 1}" class="k-monthpicker__month" tabindex="${this.focusMonth === i + 1 ? 0 : -1}" aria-pressed="${this.selected?.year === y && this.selected.month === i + 1}" aria-label="${name} ${f(y)}"${t.jy === y && t.jm === i + 1 ? ' aria-current="date"' : ""}${this.out(y, i + 1) ? " disabled" : ""}>${name}</button>`).join("")}</div></div>`;
         const name = this.getAttribute("name");
         if (name)
             this.insertAdjacentHTML("beforeend", `<input type="hidden" name="${esc(name)}" value="${this.value}">`);
@@ -267,16 +267,16 @@ export class KashiMonthPicker extends HTMLBase {
     }
 }
 KashiMonthPicker.observedAttributes = ["value", "min", "max", "digits", "label", "name"];
-/** حجم فایل به فارسی: «۱٫۲ مگابایت» */
+/** حجم فایل به زبان فعلی: «۱٫۲ مگابایت» یا «1.2 MB» */
 export function formatBytes(bytes) {
-    const units = ["بایت", "کیلوبایت", "مگابایت", "گیگابایت"];
+    const units = msg().fileUpload.units;
     let v = bytes, i = 0;
     while (v >= 1024 && i < units.length - 1) {
         v /= 1024;
         i++;
     }
     const n = i === 0 ? String(v) : v.toFixed(v < 10 ? 1 : 0).replace(/\.0$/, "");
-    return `${toFaDigits(n).replace(".", "٫")} ${units[i]}`;
+    return `${localeDigits() === "fa" ? toFaDigits(n).replace(".", "٫") : n} ${units[i]}`;
 }
 const UPLOAD = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13V3.5m-4 4 4-4 4 4M4 13v2.5A1.5 1.5 0 0 0 5.5 17h9a1.5 1.5 0 0 0 1.5-1.5V13"/></svg>';
 const TRASH = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 5.5h13M8 5.5V4h4v1.5M5 5.5l.8 10.2a1.5 1.5 0 0 0 1.5 1.3h5.4a1.5 1.5 0 0 0 1.5-1.3L15 5.5"/></svg>';
@@ -312,7 +312,7 @@ export class KashiFileUpload extends HTMLBase {
         const off = this.hasAttribute("disabled");
         const name = this.getAttribute("name");
         const accept = this.getAttribute("accept");
-        this.innerHTML = `<div class="k-dropzone"${off ? ' data-disabled=""' : ""}><span class="k-dropzone__icon" aria-hidden="true">${UPLOAD}</span><p class="k-dropzone__title" style="margin: 0"><button type="button" class="k-dropzone__browse"${off ? " disabled" : ""}${hint ? ` aria-describedby="${k}-hint"` : ""}>${esc(this.getAttribute("label") ?? "انتخاب فایل")}</button> <span>یا فایل را اینجا رها کنید</span></p>${hint ? `<p class="k-dropzone__hint" id="${k}-hint" style="margin: 0">${esc(hint)}</p>` : ""}<input type="file" tabindex="-1" aria-hidden="true"${accept ? ` accept="${esc(accept)}"` : ""}${this.multiple ? " multiple" : ""}${name ? ` name="${esc(name)}"` : ""}></div><ul class="k-file-list" role="list" hidden></ul><span class="k-sr-only" aria-live="polite"></span>`;
+        this.innerHTML = `<div class="k-dropzone"${off ? ' data-disabled=""' : ""}><span class="k-dropzone__icon" aria-hidden="true">${UPLOAD}</span><p class="k-dropzone__title" style="margin: 0"><button type="button" class="k-dropzone__browse"${off ? " disabled" : ""}${hint ? ` aria-describedby="${k}-hint"` : ""}>${esc(this.getAttribute("label") ?? msg().fileUpload.browse)}</button> <span>${esc(msg().fileUpload.drop)}</span></p>${hint ? `<p class="k-dropzone__hint" id="${k}-hint" style="margin: 0">${esc(hint)}</p>` : ""}<input type="file" tabindex="-1" aria-hidden="true"${accept ? ` accept="${esc(accept)}"` : ""}${this.multiple ? " multiple" : ""}${name ? ` name="${esc(name)}"` : ""}></div><ul class="k-file-list" role="list" hidden></ul><span class="k-sr-only" aria-live="polite"></span>`;
         this.rendered = true;
         this.input = this.querySelector("input[type=file]");
         const zone = this.querySelector(".k-dropzone");
@@ -342,7 +342,7 @@ export class KashiFileUpload extends HTMLBase {
                 return;
             const it = this.items.find((x) => x.id === b.dataset.remove);
             this.items = this.items.filter((x) => x.id !== b.dataset.remove);
-            this.announce(`${it?.file.name ?? ""} حذف شد`);
+            this.announce(msg().common.removed(it?.file.name ?? ""));
             this.changed();
         });
         this.paint();
@@ -361,16 +361,16 @@ export class KashiFileUpload extends HTMLBase {
         const added = list.map((file, i) => {
             let error;
             if (!this.accepts(file))
-                error = "این نوع فایل پذیرفته نیست.";
+                error = msg().fileUpload.wrongType;
             else if (maxSize && file.size > maxSize)
-                error = `حجم فایل بیشتر از ${formatBytes(maxSize)} است.`;
+                error = msg().fileUpload.tooBig(formatBytes(maxSize));
             else if (maxFiles && kept + i >= maxFiles)
-                error = `حداکثر ${toFaDigits(maxFiles)} فایل.`;
+                error = msg().fileUpload.tooMany(num(this, maxFiles));
             const up = !error && !!this.uploader;
             return { id: uid("f"), file, status: error ? "error" : up ? "uploading" : "done", progress: error ? 0 : up ? 0 : 100, error };
         });
         this.items = this.multiple ? [...this.items, ...added] : added;
-        this.announce(added.map((a) => `${a.file.name}: ${a.error ?? (this.uploader ? "در حال بارگذاری" : "بارگذاری شد")}`).join("، "));
+        this.announce(added.map((a) => `${a.file.name}: ${a.error ?? (this.uploader ? msg().fileUpload.uploading : msg().fileUpload.done)}`).join(msg().common.list));
         this.changed();
         for (const it of added) {
             if (it.status !== "uploading" || !this.uploader)
@@ -381,11 +381,11 @@ export class KashiFileUpload extends HTMLBase {
             }).then(() => {
                 it.status = "done";
                 it.progress = 100;
-                this.announce(`${it.file.name}: بارگذاری شد`);
+                this.announce(`${it.file.name}: ${msg().fileUpload.done}`);
                 this.changed();
             }, (e) => {
                 it.status = "error";
-                it.error = e instanceof Error ? e.message : "خطا در بارگذاری";
+                it.error = e instanceof Error ? e.message : msg().fileUpload.error;
                 this.announce(`${it.file.name}: ${it.error}`);
                 this.changed();
             });
@@ -410,7 +410,7 @@ export class KashiFileUpload extends HTMLBase {
         const list = this.querySelector(".k-file-list");
         list.hidden = !this.items.length;
         const ext = (n) => (n.split(".").pop() ?? "").slice(0, 4).toUpperCase();
-        list.innerHTML = this.items.map((it) => `<li class="k-file" data-status="${it.status}"><span class="k-file__icon" aria-hidden="true">${esc(ext(it.file.name))}</span><span class="k-file__name" title="${esc(it.file.name)}">${esc(it.file.name)}</span><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-file__remove" data-remove="${it.id}" aria-label="حذف ${esc(it.file.name)}">${TRASH}</button><span class="k-file__meta">${esc(it.error ?? `${formatBytes(it.file.size)}${it.status === "uploading" ? ` · ${toFaDigits(Math.round(it.progress))}٪` : it.status === "done" ? " · بارگذاری شد" : ""}`)}</span>${it.status === "uploading" ? `<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.round(it.progress)}" aria-label="در حال بارگذاری ${esc(it.file.name)}" class="k-progress k-progress--sm"><div class="k-progress__bar" style="--k-value: ${it.progress}%"></div></div>` : ""}</li>`).join("");
+        list.innerHTML = this.items.map((it) => `<li class="k-file" data-status="${it.status}"><span class="k-file__icon" aria-hidden="true">${esc(ext(it.file.name))}</span><span class="k-file__name" title="${esc(it.file.name)}">${esc(it.file.name)}</span><button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-file__remove" data-remove="${it.id}" aria-label="${esc(msg().common.remove(it.file.name))}">${TRASH}</button><span class="k-file__meta">${esc(it.error ?? `${formatBytes(it.file.size)}${it.status === "uploading" ? ` · ${msg().common.percent(num(this, Math.round(it.progress)))}` : it.status === "done" ? ` · ${msg().fileUpload.done}` : ""}`)}</span>${it.status === "uploading" ? `<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${Math.round(it.progress)}" aria-label="${esc(msg().fileUpload.uploadingFile(it.file.name))}" class="k-progress k-progress--sm"><div class="k-progress__bar" style="--k-value: ${it.progress}%"></div></div>` : ""}</li>`).join("");
     }
 }
 KashiFileUpload.observedAttributes = ["accept", "multiple", "max-size", "max-files", "hint", "name", "disabled", "label"];
@@ -447,7 +447,8 @@ function hsvToHex({ h, s, v }) {
     };
     return toHex(f(5), f(3), f(1));
 }
-const SWATCHES = [["فیروزه‌ای", "#0b8077"], ["لاجوردی", "#2740ed"], ["بنفش", "#7c3aed"], ["اناری", "#e51d2a"], ["زعفرانی", "#dd5e02"], ["پسته‌ای", "#518b25"], ["شب", "#2a2f3d"]];
+const SWATCH_KEYS = [["firoozeh", "#0b8077"], ["lajvard", "#2740ed"], ["violet", "#7c3aed"], ["anar", "#e51d2a"], ["zafaran", "#dd5e02"], ["peste", "#518b25"], ["shab", "#2a2f3d"]];
+const SWATCHES = () => SWATCH_KEYS.map(([k, hex]) => [msg().colorPicker.names[k], hex]);
 const SW_CHECK = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 10.5 3.2 3L15 7"/></svg>';
 /**
  * انتخاب رنگ: رنگ‌های پیشنهادی، پنل اشباع و رنگ‌مایه، کد HEX و RGB، و کنتراست با متن سفید یا مشکی.
@@ -505,15 +506,15 @@ export class KashiColorPicker extends HTMLBase {
     swatches() {
         const attr = this.getAttribute("swatches");
         if (attr === null)
-            return SWATCHES;
+            return SWATCHES();
         return attr.split(",").map((s) => s.trim().split(/\s+/)).filter(([h]) => norm(h)).map(([h, ...n]) => [n.join(" ") || h, norm(h)]);
     }
     render() {
         const k = this.key;
         const sw = this.swatches();
-        const control = `<div class="k-color">${sw.length ? `<div class="k-color__swatches" role="radiogroup" aria-label="رنگ‌های پیشنهادی">${sw.map(([n, h]) => `<label class="k-color__swatch" style="--_sw: ${h}; --_ink: ${contrastRatio(h, "#ffffff") >= 3 ? "#fff" : "#000"}" title="${esc(n)}"><input type="radio" class="k-sr-only" name="${k}-sw" value="${h}" aria-label="${esc(n)}">${SW_CHECK}</label>`).join("")}</div>` : ""}<div class="k-color__row"><span class="k-color__anchor"><button type="button" class="k-color__preview" aria-label="انتخاب رنگ دلخواه" aria-haspopup="dialog" aria-expanded="false"></button></span><div class="k-input"><input id="${k}-hex" class="k-input__control" dir="ltr" spellcheck="false" autocomplete="off"></div></div>${this.getAttribute("show-contrast") === "false" ? "" : '<p class="k-color__contrast" aria-live="polite"><span class="k-color__sample">متن نمونه</span><span></span></p>'}</div>`;
+        const control = `<div class="k-color">${sw.length ? `<div class="k-color__swatches" role="radiogroup" aria-label="${esc(msg().colorPicker.swatches)}">${sw.map(([n, h]) => `<label class="k-color__swatch" style="--_sw: ${h}; --_ink: ${contrastRatio(h, "#ffffff") >= 3 ? "#fff" : "#000"}" title="${esc(n)}"><input type="radio" class="k-sr-only" name="${k}-sw" value="${h}" aria-label="${esc(n)}">${SW_CHECK}</label>`).join("")}</div>` : ""}<div class="k-color__row"><span class="k-color__anchor"><button type="button" class="k-color__preview" aria-label="${esc(msg().colorPicker.custom)}" aria-haspopup="dialog" aria-expanded="false"></button></span><div class="k-input"><input id="${k}-hex" class="k-input__control" dir="ltr" spellcheck="false" autocomplete="off"></div></div>${this.getAttribute("show-contrast") === "false" ? "" : '<p class="k-color__contrast" aria-live="polite"><span class="k-color__sample">${esc(msg().colorPicker.sample)}</span><span></span></p>'}</div>`;
         this.querySelector(":scope > .k-field")?.remove();
-        this.insertAdjacentHTML("afterbegin", fieldHTML({ id: `${k}-hex`, label: this.getAttribute("label") ?? "رنگ", control }));
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id: `${k}-hex`, label: this.getAttribute("label") ?? msg().colorPicker.label, control }));
         this.rendered = true;
         this.querySelector(".k-color__swatches")?.addEventListener("change", (e) => this.pick(e.target.value));
         const hex = this.querySelector(`#${k}-hex`);
@@ -551,7 +552,7 @@ export class KashiColorPicker extends HTMLBase {
         const best = Math.max(white, black);
         const out = this.querySelector(".k-color__contrast span:last-child");
         if (out)
-            out.textContent = `کنتراست با متن ${ink === "#ffffff" ? "سفید" : "مشکی"}: ${toFaDigits((Math.round(best * 10) / 10).toFixed(1)).replace(".", "٫")} به ۱ ${best >= 4.5 ? "(AA)" : "(کمتر از AA)"}`;
+            out.textContent = msg().colorPicker.contrast(ink === "#ffffff" ? "white" : "black", num(this, (Math.round(best * 10) / 10).toFixed(1)).replace(".", msg().common.decimal), best >= 4.5);
         const name = this.getAttribute("name");
         this.querySelectorAll(":scope > input[type=hidden]").forEach((el) => el.remove());
         if (name)
@@ -562,15 +563,15 @@ export class KashiColorPicker extends HTMLBase {
     }
     paintMessages(invalid) {
         const hex = this.querySelector(`#${this.key}-hex`);
-        setMessages(this.querySelector(":scope > .k-field"), hex, `${this.key}-hex`, invalid ? "کد رنگ معتبر نیست؛ مثل ‎#0fa89b‎ وارد کنید." : null, this.getAttribute("hint"));
+        setMessages(this.querySelector(":scope > .k-field"), hex, `${this.key}-hex`, invalid ? msg().colorPicker.invalid : null, this.getAttribute("hint"));
     }
     openPanel() {
         const anchor = this.querySelector(".k-color__anchor");
         const p = document.createElement("div");
         p.className = "k-color__panel";
         p.setAttribute("role", "dialog");
-        p.setAttribute("aria-label", "انتخاب رنگ دلخواه");
-        p.innerHTML = `<div class="k-color__area" role="slider" tabindex="0" aria-label="اشباع و روشنایی"><span class="k-color__thumb"></span></div><div class="k-color__tools"><span class="k-color__current" aria-hidden="true"></span><input type="range" class="k-color__hue" min="0" max="359" aria-label="رنگ‌مایه"></div><div class="k-color__codes" dir="ltr">${["R", "G", "B"].map((ch, i) => `<label class="k-color__code"><input class="k-color__num" inputmode="numeric" data-ch="${i}" aria-label="${["قرمز", "سبز", "آبی"][i]}"><span aria-hidden="true">${ch}</span></label>`).join("")}</div>`;
+        p.setAttribute("aria-label", msg().colorPicker.custom);
+        p.innerHTML = `<div class="k-color__area" role="slider" tabindex="0" aria-label="${esc(msg().colorPicker.area)}"><span class="k-color__thumb"></span></div><div class="k-color__tools"><span class="k-color__current" aria-hidden="true"></span><input type="range" class="k-color__hue" min="0" max="359" aria-label="${esc(msg().colorPicker.hue)}"></div><div class="k-color__codes" dir="ltr">${["R", "G", "B"].map((ch, i) => `<label class="k-color__code"><input class="k-color__num" inputmode="numeric" data-ch="${i}" aria-label="${esc([msg().colorPicker.red, msg().colorPicker.green, msg().colorPicker.blue][i])}"><span aria-hidden="true">${ch}</span></label>`).join("")}</div>`;
         anchor.append(p);
         this.panel = p;
         const area = p.querySelector(".k-color__area");
@@ -619,17 +620,17 @@ export class KashiColorPicker extends HTMLBase {
     paintPanel() {
         const p = this.panel;
         const { h, s, v } = this.hsv;
-        const pct = (n) => `${toFaDigits(Math.round(n * 100))}٪`;
+        const pct = (n) => msg().common.percent(num(this, Math.round(n * 100)));
         const area = p.querySelector(".k-color__area");
         area.style.setProperty("--_hue", `hsl(${h} 100% 50%)`);
         area.setAttribute("aria-valuenow", String(Math.round(s * 100)));
-        area.setAttribute("aria-valuetext", `اشباع ${pct(s)}، روشنایی ${pct(v)}`);
+        area.setAttribute("aria-valuetext", msg().colorPicker.areaValue(pct(s), pct(v)));
         const thumb = p.querySelector(".k-color__thumb");
         thumb.style.left = `${s * 100}%`;
         thumb.style.top = `${(1 - v) * 100}%`;
         const hue = p.querySelector(".k-color__hue");
         hue.value = String(Math.round(h));
-        hue.setAttribute("aria-valuetext", `${toFaDigits(Math.round(h))} درجه`);
+        hue.setAttribute("aria-valuetext", msg().colorPicker.degrees(num(this, Math.round(h))));
         const rgb = rgbOf(this.current);
         p.querySelectorAll(".k-color__num").forEach((el, i) => {
             if (document.activeElement !== el)

package/dist/table.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";
 import { cellNumber } from "./controls.js";
 const search = (s) => normalizePersian(s, { digits: "latin" }).toLowerCase();
 /**
@@ -123,7 +123,7 @@ export class KashiDataTable extends HTMLBase {
             const th = document.createElement("th");
             th.scope = "col";
             th.className = "k-table__check";
-            th.innerHTML = '<input type="checkbox" class="k-checkbox" aria-label="انتخاب همهٔ ردیف‌ها">';
+            th.innerHTML = '<input type="checkbox" class="k-checkbox" aria-label="${esc(msg().table.selectAll)}">';
             head.prepend(th);
             th.querySelector("input").addEventListener("change", (e) => {
                 const on = e.target.checked;
@@ -162,7 +162,7 @@ export class KashiDataTable extends HTMLBase {
                 const td = document.createElement("td");
                 td.className = "k-table__check";
                 const label = tr.children[0]?.textContent?.trim();
-                td.innerHTML = `<input type="checkbox" class="k-checkbox" aria-label="${esc(label ? `انتخاب ${label}` : "انتخاب ردیف")}">`;
+                td.innerHTML = `<input type="checkbox" class="k-checkbox" aria-label="${esc(label ? msg().table.selectNamed(label) : msg().table.selectRow)}">`;
                 tr.prepend(td);
                 tr.setAttribute("aria-selected", "false");
                 td.querySelector("input").addEventListener("change", (e) => {
@@ -212,13 +212,13 @@ export class KashiDataTable extends HTMLBase {
         const box = document.createElement("div");
         box.className = "k-table-search k-field";
         box.style.marginBlockEnd = "var(--k-space-3)";
-        box.innerHTML = `<div class="k-input k-input--sm"><input id="${id}" class="k-input__control" type="search" placeholder="جستجو در جدول" aria-label="جستجو در جدول"></div><span class="k-sr-only" aria-live="polite"></span>`;
+        box.innerHTML = `<div class="k-input k-input--sm"><input id="${id}" class="k-input__control" type="search" placeholder="${esc(msg().table.search)}" aria-label="${esc(msg().table.search)}"></div><span class="k-sr-only" aria-live="polite"></span>`;
         this.prepend(box);
         const input = box.querySelector("input");
         input.addEventListener("input", () => {
             this.query = input.value;
             this.apply();
-            box.querySelector(".k-sr-only").textContent = `${toFaDigits(this.visibleRows().length)} ردیف`;
+            box.querySelector(".k-sr-only").textContent = msg().table.rows(num(this, this.visibleRows().length));
         });
     }
     /** مرتب‌سازی و جستجو را روی ردیف‌ها اعمال می‌کند */
@@ -258,7 +258,7 @@ export class KashiDataTable extends HTMLBase {
         body.querySelector(".k-table__empty")?.remove();
         if (q && !this.visibleRows().length) {
             const cols = ths.length;
-            body.insertAdjacentHTML("beforeend", `<tr class="k-table__empty"><td colspan="${cols}"><p style="padding: 2rem; margin: 0; text-align: center">نتیجه‌ای پیدا نشد.</p></td></tr>`);
+            body.insertAdjacentHTML("beforeend", `<tr class="k-table__empty"><td colspan="${cols}"><p style="padding: 2rem; margin: 0; text-align: center">${esc(msg().common.noResults)}</p></td></tr>`);
         }
         this.selectionChanged(false);
     }