@kashi-ui/elements 0.0.0-stage → 0.24.0

package/dist/controls.js

@@ -0,0 +1,425 @@
+import { formatNumber, normalizePersian, onlyDigits, toEnDigits, toFaDigits } from "@kashi-ui/persian";
+import { HTMLBase, bool, define, emit, esc, fieldHTML, 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) {
+    host.querySelectorAll(":scope > input[type=hidden][data-kashi-value]").forEach((el) => el.remove());
+    if (!name)
+        return;
+    for (const v of values) {
+        const h = document.createElement("input");
+        h.type = "hidden";
+        h.name = name;
+        h.value = v;
+        h.dataset.kashiValue = "";
+        host.append(h);
+    }
+}
+/**
+ * فیلد برچسب: با Enter، «,» یا «،» اضافه، با Backspace حذف آخرین، و چسباندن چند مورد با هم.
+ * با name هر برچسب یک فیلد پنهان هم‌نام در فرم است.
+ */
+export class KashiTagInput extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.tags = [];
+        this.localError = null;
+        this.rendered = false;
+        this.valueSet = false;
+        this.key = uid("kashi-tags");
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.tags = this.parse(this.getAttribute("value"));
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value")
+            this.value = this.parse(next);
+        else
+            this.render();
+    }
+    parse(v) {
+        return (v ?? "").split(/[,،]/).map((s) => s.trim()).filter(Boolean);
+    }
+    /** برچسب‌ها به‌شکل آرایه */
+    get value() {
+        return [...this.tags];
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.tags = Array.isArray(v) ? [...v] : this.parse(v);
+        if (this.rendered)
+            this.paint();
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    render() {
+        const id = this.key;
+        const ariaLabel = this.getAttribute("aria-label");
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : "برچسب‌ها";
+        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 }));
+        this.input = this.querySelector(".k-tag-input__control");
+        const box = this.querySelector(".k-tag-input");
+        box.addEventListener("click", (e) => {
+            const rm = e.target.closest(".k-badge__remove");
+            if (rm)
+                this.removeAt(Number(rm.dataset.i));
+            else
+                this.input.focus();
+        });
+        this.input.addEventListener("keydown", (e) => {
+            if ((e.key === "Enter" || e.key === "," || e.key === "،") && this.input.value.trim()) {
+                e.preventDefault();
+                this.add([this.input.value]);
+            }
+            else if (e.key === "Backspace" && !this.input.value && this.tags.length)
+                this.removeAt(this.tags.length - 1);
+        });
+        this.input.addEventListener("input", () => {
+            this.localError = null;
+            // صفحه‌کلید موبایل و IME رویداد کلید نمی‌فرستند؛ جداکننده را در متن هم پیدا کن
+            const parts = this.input.value.split(/[,،\n\t]/);
+            if (parts.length > 1) {
+                const rest = parts.pop() ?? "";
+                this.add(parts);
+                if (rest && !this.localError)
+                    this.input.value = rest;
+            }
+            else
+                this.paintMessages();
+        });
+        this.input.addEventListener("blur", () => this.input.value.trim() && this.add([this.input.value]));
+        this.rendered = true;
+        this.paint();
+    }
+    add(raw) {
+        const max = Number(this.getAttribute("max")) || Infinity;
+        const dup = bool(this, "allow-duplicates");
+        let next = [...this.tags];
+        let added = "";
+        for (const r of raw) {
+            const t = normalizePersian(r).trim();
+            if (!t)
+                continue;
+            const err = next.length >= max ? `حداکثر ${toFaDigits(max)} مورد` : !dup && next.includes(t) ? "این مورد قبلاً اضافه شده است." : this.validate?.(t);
+            if (err) {
+                this.localError = err;
+                this.commit(next, added);
+                this.input.value = t;
+                return;
+            }
+            next = [...next, t];
+            added = `${t} اضافه شد`;
+        }
+        this.localError = null;
+        this.input.value = "";
+        this.commit(next, added);
+    }
+    removeAt(i) {
+        const t = this.tags[i];
+        this.commit(this.tags.filter((_, j) => j !== i), `${t} حذف شد`);
+        this.input.focus();
+    }
+    commit(next, announce) {
+        const changed = next.join("\u0000") !== this.tags.join("\u0000");
+        this.tags = next;
+        this.paint();
+        if (announce)
+            this.querySelector(".k-field > .k-sr-only").textContent = announce;
+        if (changed)
+            emit(this, "kashi-change", { value: [...next] });
+    }
+    paint() {
+        const box = this.querySelector(".k-tag-input");
+        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("");
+        this.input.insertAdjacentHTML("beforebegin", badges);
+        this.input.placeholder = this.tags.length ? "" : (this.getAttribute("placeholder") ?? "");
+        this.paintMessages();
+        syncHiddenList(this, this.getAttribute("name"), this.tags);
+    }
+    paintMessages() {
+        const error = this.getAttribute("error") || this.localError;
+        this.querySelector(".k-tag-input").toggleAttribute("data-invalid", !!error);
+        setMessages(this.querySelector(":scope > .k-field"), this.input, this.key, error, this.getAttribute("hint"));
+    }
+}
+KashiTagInput.observedAttributes = ["label", "hint", "error", "placeholder", "disabled", "name", "value", "max", "tone", "allow-duplicates", "aria-label"];
+const MINUS = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M5 10h10"/></svg>';
+const PLUS = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M10 5v10M5 10h10"/></svg>';
+/** فیلد عدد با دکمه‌های − و +، ارقام فارسی، جداکنندهٔ هزارگان و کلیدهای ↑↓ و PageUp/PageDown */
+export class KashiNumberInput extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.current = null;
+        this.rendered = false;
+        this.valueSet = false;
+        this.key = uid("kashi-num");
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.current = this.num(this.getAttribute("value")) ?? null;
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value")
+            this.value = next === null || next === "" ? null : Number(next);
+        else
+            this.render();
+    }
+    get value() {
+        return this.current;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.current = v === null || v === undefined || Number.isNaN(Number(v)) ? null : Number(v);
+        if (this.rendered)
+            this.paint();
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    num(v) {
+        return v === null || v === "" || Number.isNaN(Number(v)) ? undefined : Number(v);
+    }
+    get min() {
+        return this.num(this.getAttribute("min"));
+    }
+    get max() {
+        return this.num(this.getAttribute("max"));
+    }
+    clamp(n) {
+        return Math.min(this.max ?? Infinity, Math.max(this.min ?? -Infinity, n));
+    }
+    show(n) {
+        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, "٬");
+    }
+    render() {
+        const id = this.key;
+        const ariaLabel = this.getAttribute("aria-label");
+        const label = this.hasAttribute("label") ? this.getAttribute("label") : ariaLabel ? null : "تعداد";
+        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>`;
+        this.querySelector(":scope > .k-field")?.remove();
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, control }));
+        this.input = this.querySelector("input.k-input__control");
+        this.querySelectorAll(".k-number__step").forEach((b) => b.addEventListener("click", () => this.bump(Number(b.dataset.step))));
+        this.input.addEventListener("input", () => {
+            const raw = this.input.value;
+            const d = onlyDigits(raw);
+            // هنگام تایپ محدود نمی‌شود تا عدد نیمه‌کاره پاک نشود؛ محدودسازی در blur و دکمه‌ها
+            this.set(d ? (/^\s*[-−]/.test(raw) ? -1 : 1) * Number(d) : null, false);
+        });
+        this.input.addEventListener("blur", () => {
+            if (this.current !== null && this.current !== this.clamp(this.current))
+                this.set(this.clamp(this.current));
+            else
+                this.paint();
+        });
+        this.input.addEventListener("keydown", (e) => {
+            const keys = {
+                ArrowUp: () => this.bump(1),
+                ArrowDown: () => this.bump(-1),
+                PageUp: () => this.bump(10),
+                PageDown: () => this.bump(-10),
+                Home: () => this.min !== undefined && this.set(this.min),
+                End: () => this.max !== undefined && this.set(this.max),
+            };
+            if (!keys[e.key])
+                return;
+            e.preventDefault();
+            keys[e.key]();
+        });
+        this.rendered = true;
+        this.paint();
+    }
+    bump(k) {
+        const step = this.num(this.getAttribute("step")) ?? 1;
+        this.set(this.clamp((this.current ?? this.min ?? 0) + k * step));
+    }
+    set(n, repaint = true) {
+        const changed = n !== this.current;
+        this.current = n;
+        if (repaint)
+            this.paint();
+        else
+            this.paintState();
+        if (changed)
+            emit(this, "kashi-change", { value: n });
+    }
+    paint() {
+        const shown = this.show(this.current);
+        if (this.input.value !== shown)
+            this.input.value = shown;
+        this.paintState();
+    }
+    paintState() {
+        const el = this.input;
+        const c = this.current;
+        for (const [a, v] of [["aria-valuenow", c], ["aria-valuemin", this.min], ["aria-valuemax", this.max]]) {
+            if (v === null || v === undefined)
+                el.removeAttribute(a);
+            else
+                el.setAttribute(a, String(v));
+        }
+        if (c === null)
+            el.removeAttribute("aria-valuetext");
+        else
+            el.setAttribute("aria-valuetext", this.show(c));
+        const off = this.hasAttribute("disabled");
+        const [dec, inc] = this.querySelectorAll(".k-number__step");
+        dec.disabled = off || (this.min !== undefined && (c ?? 0) <= this.min);
+        inc.disabled = off || (this.max !== undefined && (c ?? 0) >= this.max);
+        setMessages(this.querySelector(":scope > .k-field"), el, this.key, this.getAttribute("error"), this.getAttribute("hint"));
+        syncHiddenList(this, this.getAttribute("name"), [c === null ? "" : String(c)]);
+    }
+}
+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() {
+        super(...arguments);
+        this.current = 0;
+        this.valueSet = false;
+        this.key = uid("kashi-rate");
+    }
+    connectedCallback() {
+        if (!this.valueSet)
+            this.current = Number(this.getAttribute("value")) || 0;
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (old === next || !this.isConnected)
+            return;
+        if (name === "value")
+            this.current = Number(next) || 0;
+        this.render();
+    }
+    get value() {
+        return this.current;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.current = Number(v) || 0;
+        if (this.isConnected)
+            this.render();
+    }
+    render() {
+        const max = Number(this.getAttribute("max")) || 5;
+        const label = this.getAttribute("label") ?? "امتیاز";
+        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>`;
+            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>`;
+        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) => {
+            this.current = Number(e.target.value);
+            fill(this.current);
+            emit(this, "kashi-change", { value: this.current });
+        });
+        fs.addEventListener("pointerover", (e) => {
+            const star = e.target.closest(".k-rating__star");
+            if (star && !off)
+                fill([...fs.querySelectorAll(".k-rating__star")].indexOf(star) + 1);
+        });
+        fs.addEventListener("pointerleave", () => fill(this.current));
+    }
+}
+KashiRating.observedAttributes = ["value", "max", "readonly", "show-value", "size", "label", "name", "disabled"];
+/** شماره‌های صفحه: ۱ … ۴ ۵ ۶ … ۲۰ */
+export function pageRange(page, total, siblings = 1) {
+    const out = [1];
+    const from = Math.max(2, page - siblings);
+    const to = Math.min(total - 1, page + siblings);
+    if (from > 2)
+        out.push(from === 3 ? 2 : null);
+    for (let p = from; p <= to; p++)
+        out.push(p);
+    if (to < total - 1)
+        out.push(to === total - 2 ? total - 1 : null);
+    if (total > 1)
+        out.push(total);
+    return out;
+}
+const chevron = (d) => `<svg data-k-mirror="" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${d}"/></svg>`;
+/**
+ * صفحه‌بندی. با href (مثل "?page={page}") لینک می‌سازد و با رفتن به صفحهٔ دیگر صفحه عوض می‌شود؛
+ * بدون آن دکمه است و رویداد kashi-change با شمارهٔ صفحه می‌فرستد.
+ */
+export class KashiPagination extends HTMLBase {
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback(_n, old, next) {
+        if (old !== next && this.isConnected)
+            this.render();
+    }
+    get page() {
+        return Math.max(1, Number(this.getAttribute("page")) || 1);
+    }
+    set page(p) {
+        this.setAttribute("page", String(p));
+    }
+    get total() {
+        return Math.max(1, Number(this.getAttribute("total")) || 1);
+    }
+    render() {
+        const page = Math.min(this.page, this.total), total = this.total;
+        const n = (v) => (this.getAttribute("digits") === "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.querySelector("nav").addEventListener("click", (e) => {
+            const b = e.target.closest("button[data-to]");
+            if (!b || b.disabled)
+                return;
+            const to = Number(b.dataset.to);
+            this.setAttribute("page", String(to));
+            emit(this, "kashi-change", { page: to });
+            // فوکوس روی شمارهٔ صفحهٔ تازه بماند
+            this.querySelector(`.k-pagination__page[data-to="${to}"]`)?.focus();
+        });
+        if (focused)
+            this.querySelector(`[data-to="${focused}"]`)?.focus();
+    }
+}
+KashiPagination.observedAttributes = ["page", "total", "siblings", "href", "digits", "label", "summary"];
+/** تبدیل متن سلول به عدد برای مرتب‌سازی: «۱٬۲۵۰٬۰۰۰ تومان» → 1250000 */
+export const cellNumber = (text) => {
+    const t = toEnDigits(text).replace(/[٬,\s]/g, "").replace("٫", ".").replace("−", "-");
+    const m = t.match(/-?\d+(\.\d+)?/);
+    return m ? Number(m[0]) : NaN;
+};
+define("kashi-tag-input", KashiTagInput, "block");
+define("kashi-number-input", KashiNumberInput, "block");
+define("kashi-rating", KashiRating);
+define("kashi-pagination", KashiPagination, "block");

package/dist/display.d.ts

@@ -0,0 +1,41 @@
+import { HTMLBase } from "./base.js";
+/** پایهٔ عناصر نمایشی: با هر تغییر ویژگی دوباره رسم می‌شوند */
+declare abstract class Display extends HTMLBase {
+    protected abstract render(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}
+/** نمایش مبلغ با تومان یا ریال، حالت خلاصه (۱٫۲ میلیون) و مبلغ به حروف برای صفحه‌خوان */
+export declare class KashiMoney extends Display {
+    static observedAttributes: string[];
+    protected render(): void;
+}
+/** تاریخ شمسی در یک <time> معنایی؛ مثل «۱ فروردین ۱۴۰۵» */
+export declare class KashiDate extends Display {
+    static observedAttributes: string[];
+    protected render(): void;
+}
+/** «۵ دقیقه پیش» که خودش به‌روز می‌شود؛ تاریخ کامل شمسی در title */
+export declare class KashiRelativeTime extends Display {
+    static observedAttributes: string[];
+    private timer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): void;
+}
+/** شمارش معکوس با ارقام فارسی؛ در پایان رویداد kashi-complete را می‌فرستد */
+export declare class KashiCountdown extends HTMLBase {
+    static observedAttributes: string[];
+    private end;
+    private timer;
+    private done;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    /** شروع دوباره از ابتدا، مثلاً پس از ارسال دوبارهٔ کد */
+    restart(): void;
+    /** ثانیه‌های باقی‌مانده */
+    get remaining(): number;
+    private render;
+}
+export {};

package/dist/display.js

@@ -0,0 +1,144 @@
+import { formatJalali, formatMoney, formatRelative, fromISODate, numberToWords, rialToToman, toFaDigits, tomanToRial } from "@kashi-ui/persian";
+import { HTMLBase, define, emit, esc } from "./base.js";
+/** «2026-03-21» به نیمه‌شب محلی، و بقیهٔ قالب‌ها (با ساعت) با Date */
+const parseDateTime = (text) => {
+    if (!text)
+        return null;
+    const d = fromISODate(text.trim()) ?? new Date(text);
+    return Number.isNaN(d.getTime()) ? null : d;
+};
+/** پایهٔ عناصر نمایشی: با هر تغییر ویژگی دوباره رسم می‌شوند */
+class Display extends HTMLBase {
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.render();
+    }
+}
+/** نمایش مبلغ با تومان یا ریال، حالت خلاصه (۱٫۲ میلیون) و مبلغ به حروف برای صفحه‌خوان */
+export class KashiMoney extends Display {
+    render() {
+        const value = Number(this.getAttribute("value") ?? 0);
+        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 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 spoken = this.getAttribute("words") !== "false" && Number.isSafeInteger(Math.round(n))
+            ? `${numberToWords(Math.round(n))} ${unit === "toman" ? "تومان" : "ریال"}`
+            : 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>`;
+    }
+}
+KashiMoney.observedAttributes = ["value", "unit", "from", "compact", "digits", "signed", "words", "size"];
+/** تاریخ شمسی در یک <time> معنایی؛ مثل «۱ فروردین ۱۴۰۵» */
+export class KashiDate extends Display {
+    render() {
+        const d = parseDateTime(this.getAttribute("datetime"));
+        if (!d) {
+            this.textContent = "";
+            return;
+        }
+        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>`;
+    }
+}
+KashiDate.observedAttributes = ["datetime", "format", "digits"];
+/** «۵ دقیقه پیش» که خودش به‌روز می‌شود؛ تاریخ کامل شمسی در title */
+export class KashiRelativeTime extends Display {
+    connectedCallback() {
+        super.connectedCallback();
+        clearInterval(this.timer);
+        this.timer = setInterval(() => this.render(), Number(this.getAttribute("refresh")) || 60000);
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    render() {
+        const d = parseDateTime(this.getAttribute("datetime"));
+        if (!d) {
+            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>`;
+    }
+}
+KashiRelativeTime.observedAttributes = ["datetime", "digits", "refresh"];
+const pad = (n) => String(n).padStart(2, "0");
+/** شمارش معکوس با ارقام فارسی؛ در پایان رویداد kashi-complete را می‌فرستد */
+export class KashiCountdown extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.end = 0;
+        this.done = false;
+    }
+    connectedCallback() {
+        this.restart();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.isConnected || old === next)
+            return;
+        if (name === "to" || name === "seconds")
+            this.restart();
+        else
+            this.render();
+    }
+    /** شروع دوباره از ابتدا، مثلاً پس از ارسال دوبارهٔ کد */
+    restart() {
+        const to = parseDateTime(this.getAttribute("to"));
+        this.end = to ? to.getTime() : Date.now() + (Number(this.getAttribute("seconds")) || 0) * 1000;
+        this.done = false;
+        clearInterval(this.timer);
+        this.render();
+        this.timer = setInterval(() => this.render(), 1000);
+    }
+    /** ثانیه‌های باقی‌مانده */
+    get remaining() {
+        return Math.max(0, Math.ceil((this.end - Date.now()) / 1000));
+    }
+    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 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 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, "ثانیه"]];
+            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 {
+            const clock = (d ? `${d}:` : "") + (h || d ? `${pad(h)}:` : "") + `${pad(m)}:${pad(s)}`;
+            this.innerHTML = `<span role="timer" aria-label="${aria}" class="k-countdown"${doneAttr} dir="ltr"><span aria-hidden="true">${f(clock)}</span></span>`;
+        }
+        if (left === 0) {
+            clearInterval(this.timer);
+            if (!this.done) {
+                this.done = true;
+                emit(this, "kashi-complete", {});
+            }
+        }
+    }
+}
+KashiCountdown.observedAttributes = ["to", "seconds", "variant", "digits", "label"];
+define("kashi-money", KashiMoney);
+define("kashi-date", KashiDate);
+define("kashi-relative-time", KashiRelativeTime);
+define("kashi-countdown", KashiCountdown);

package/dist/fields.d.ts

@@ -0,0 +1,24 @@
+import { HTMLBase } from "./base.js";
+/**
+ * کد تأیید یک‌بارمصرف: یک input واقعی (نه شش input جدا)، پس چسباندن، پاک کردن،
+ * صفحه‌خوان و پر شدن خودکار کد پیامکی (autocomplete="one-time-code") کار می‌کنند.
+ */
+export declare class KashiOtp extends HTMLBase {
+    static observedAttributes: string[];
+    private code;
+    private caret;
+    private valueSet;
+    private rendered;
+    private key;
+    private input;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    get value(): string;
+    set value(v: string);
+    focus(options?: FocusOptions): void;
+    private get length();
+    private render;
+    private paint;
+    /** فقط خانه‌ها؛ مقدار input را دست نمی‌زند تا تایپ کاربر پیش از رویداد input پاک نشود */
+    private paintSlots;
+}