@kashi-ui/elements 0.24.0 → 0.26.0

package/README.md

@@ -29,11 +29,16 @@ import "@kashi-ui/elements";
 ## عنصرها
 
 - **فیلدهای فارسی:** `kashi-national-id`، `kashi-legal-id`، `kashi-mobile`، `kashi-landline`، `kashi-card-number`، `kashi-iban`، `kashi-postal-code`، `kashi-price`
-- **انتخاب:** `kashi-date-picker`، `kashi-calendar`، `kashi-otp`، `kashi-combobox`، `kashi-province-select`، `kashi-city-select`، `kashi-tag-input`، `kashi-number-input`، `kashi-rating`
+- **فیلد متنی و اطلاعیه:** `kashi-input` (پاک کردن، نمایش رمز، شمارنده)، `kashi-textarea`، `kashi-banner` (با دکمهٔ بستن)
+- **فیلدهای دیگر:** `kashi-time-input`، `kashi-plate-input`، `kashi-persian-textarea`، `kashi-keyboard-fix`، `kashi-password-strength`، `kashi-inline-edit`
+- **انتخاب:** `kashi-date-picker`، `kashi-calendar`، `kashi-date-range-picker`، `kashi-month-picker`، `kashi-appointment-picker`، `kashi-otp`، `kashi-combobox`، `kashi-multi-select`، `kashi-province-select`، `kashi-city-select`، `kashi-tag-input`، `kashi-chip-group`، `kashi-number-input`، `kashi-slider`، `kashi-rating`، `kashi-color-picker`، `kashi-file-upload`
 - **نشانی و نقشه:** `kashi-address-form`، `kashi-iran-map`
-- **داده:** `kashi-data-table`، `kashi-pagination`
+- **داده و نمودار:** `kashi-data-table`، `kashi-pagination`، `kashi-bar-chart`، `kashi-line-chart`، `kashi-pie-chart`، `kashi-bar-list`، `kashi-proportion-bar`، `kashi-sparkline`، `kashi-activity-heatmap`
 - **نمایش:** `kashi-money`، `kashi-date`، `kashi-relative-time`، `kashi-countdown`
-- **تعاملی:** `kashi-dialog`، `kashi-tabs`، `kashi-tooltip`، `kashi-dropdown-menu`، `kashi-popover`، `kashi-toaster` (و تابع `toast()`)، `kashi-copy-button`
+- **تعاملی:** `kashi-dialog`، `kashi-tabs`، `kashi-tooltip`، `kashi-dropdown-menu`، `kashi-popover`، `kashi-context-menu`، `kashi-command-palette`، `kashi-toaster` (و تابع `toast()`)، `kashi-copy-button`
+- **چیدمان:** `kashi-carousel`، `kashi-tree-view`، `kashi-tour`، `kashi-splitter`، `kashi-side-nav`
+
+فایل CDN فقط بخش‌هایی را دانلود می‌کند که تگشان در صفحه هست.
 
 هر فیلد با `name` مقدار خام را با ارقام انگلیسی در فرم ارسال می‌کند، مقدار نامعتبر جلوی ارسال فرم را می‌گیرد و با هر تغییر رویداد `kashi-change` می‌فرستد.
 

package/dist/appointment.d.ts

@@ -0,0 +1,40 @@
+import { HTMLBase } from "./base.js";
+export interface AppointmentSlot {
+    time: string;
+    available?: boolean;
+}
+/**
+ * انتخاب نوبت: روزهای شمسی در یک ردیف (با تعداد نوبت خالی) و ساعت‌های همان روز در گروه‌های صبح، بعدازظهر و عصر.
+ * ساعت کاری با from، to و step؛ نوبت‌های پر با booked (JSON) یا همهٔ ساعت‌ها با element.getSlots.
+ * با name دو فیلد name_date (YYYY-MM-DD) و name_time در فرم ارسال می‌شوند.
+ */
+export declare class KashiAppointmentPicker extends HTMLBase {
+    static observedAttributes: string[];
+    /** ساعت‌های هر روز به‌طور کامل: (date) => ["09:00", { time: "09:30", available: false }] */
+    getSlots?: (date: Date) => (string | AppointmentSlot)[];
+    /** روزهای تعطیل دلخواه؛ پیش‌فرض جمعه‌ها و تعطیلات رسمی ثابت */
+    isClosed?: (date: Date) => boolean;
+    private selected;
+    private active;
+    private valueSet;
+    private rendered;
+    private timer;
+    private key;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    /** «2026-11-04 10:30» */
+    private parse;
+    /** نوبت انتخاب‌شده: { date, time } */
+    get value(): {
+        date: Date;
+        time: string;
+    } | null;
+    set value(v: {
+        date: Date;
+        time: string;
+    } | null);
+    private list;
+    private render;
+    private roving;
+}

package/dist/appointment.js

@@ -0,0 +1,174 @@
+import { JALALI_MONTHS, WEEKDAYS, formatJalali, formatTime, fromISODate, getIranHoliday, parseTime, toFaDigits, toISODate, toJalali } from "@kashi-ui/persian";
+import { HTMLBase, define, emit, esc, uid } from "./base.js";
+const PERIODS = [["صبح", 12], ["بعدازظهر", 17], ["عصر", 24]];
+const day = (d, add = 0) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + add);
+const same = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const minutes = (t) => {
+    const p = parseTime(t);
+    return p ? p.hours * 60 + p.minutes : 0;
+};
+const CLOCK = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M10 6v4l2.5 2"/></svg>';
+/**
+ * انتخاب نوبت: روزهای شمسی در یک ردیف (با تعداد نوبت خالی) و ساعت‌های همان روز در گروه‌های صبح، بعدازظهر و عصر.
+ * ساعت کاری با from، to و step؛ نوبت‌های پر با booked (JSON) یا همهٔ ساعت‌ها با element.getSlots.
+ * با name دو فیلد name_date (YYYY-MM-DD) و name_time در فرم ارسال می‌شوند.
+ */
+export class KashiAppointmentPicker extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.selected = null;
+        this.active = -1;
+        this.valueSet = false;
+        this.rendered = false;
+        this.key = uid("kashi-appt");
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.selected = this.parse(this.getAttribute("value"));
+        this.render();
+        // ساعت‌های گذشتهٔ امروز هر دقیقه پر می‌شوند
+        clearInterval(this.timer);
+        this.timer = setInterval(() => !this.contains(document.activeElement) && this.render(), 60000);
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value")
+            this.selected = this.parse(next);
+        this.render();
+    }
+    /** «2026-11-04 10:30» */
+    parse(v) {
+        const m = (v ?? "").trim().match(/^(\d{4}-\d{2}-\d{2})[ T](\d{1,2}:\d{2})$/);
+        const d = m ? fromISODate(m[1]) : null;
+        return d && m ? { date: d, time: formatTime(parseTime(m[2])) } : null;
+    }
+    /** نوبت انتخاب‌شده: { date, time } */
+    get value() {
+        return this.selected ? { ...this.selected } : null;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.selected = v ? { date: day(v.date), time: v.time } : null;
+        if (this.rendered)
+            this.render();
+    }
+    list() {
+        const now = new Date();
+        const start = fromISODate(this.getAttribute("start") ?? "") ?? now;
+        const count = Math.max(1, Number(this.getAttribute("days")) || 7);
+        let booked = {};
+        try {
+            booked = JSON.parse(this.getAttribute("booked") ?? "{}");
+        }
+        catch { /* قالب نادرست نادیده گرفته می‌شود */ }
+        const from = this.getAttribute("from") ?? "09:00", to = this.getAttribute("to") ?? "17:00";
+        const step = Number(this.getAttribute("step")) || 30;
+        const closedAttr = this.getAttribute("closed") !== "false";
+        return Array.from({ length: count }, (_, i) => {
+            const d = day(start, i);
+            const closed = this.isClosed ? this.isClosed(d) : closedAttr && !!getIranHoliday(d);
+            let slots = [];
+            if (!closed) {
+                if (this.getSlots)
+                    slots = this.getSlots(d).map((s) => (typeof s === "string" ? { time: s, available: true } : { time: s.time, available: s.available ?? true }));
+                else {
+                    const taken = new Set(booked[toISODate(d)] ?? []);
+                    for (let m = minutes(from); m + step <= minutes(to); m += step) {
+                        const time = formatTime({ hours: Math.floor(m / 60), minutes: m % 60 });
+                        slots.push({ time, available: !taken.has(time) });
+                    }
+                }
+                if (same(d, now)) {
+                    const nm = now.getHours() * 60 + now.getMinutes();
+                    slots = slots.map((s) => (minutes(s.time) <= nm ? { ...s, available: false } : s));
+                }
+            }
+            return { date: d, closed, slots, free: slots.filter((s) => s.available).length };
+        });
+    }
+    render(focus = null) {
+        const now = new Date();
+        const fa = this.getAttribute("digits") !== "latin";
+        const n = (v) => (fa ? toFaDigits(String(v)) : String(v));
+        const digits = fa ? "fa" : "latin";
+        const list = this.list();
+        if (this.active < 0 || this.active >= list.length) {
+            const i = this.selected ? list.findIndex((x) => same(x.date, this.selected.date)) : -1;
+            this.active = i >= 0 ? i : Math.max(0, list.findIndex((x) => x.free > 0));
+        }
+        const cur = list[this.active];
+        const label = this.getAttribute("label") ?? "انتخاب نوبت";
+        const wd = (d) => (same(d, now) ? "امروز" : same(d, day(now, 1)) ? "فردا" : WEEKDAYS[(d.getDay() + 1) % 7]);
+        const daysHtml = list.map((x, i) => {
+            const { jm, jd } = toJalali(x.date);
+            const status = x.closed ? "تعطیل" : x.free ? `${n(x.free)} نوبت خالی` : "نوبت خالی ندارد";
+            return `<button type="button" role="radio" data-i="${i}" class="k-appt__day" aria-checked="${i === this.active}" tabindex="${i === this.active ? 0 : -1}"${x.closed ? " disabled" : ""} aria-label="${esc(`${formatJalali(x.date, { style: "full", digits })}، ${status}`)}"><span class="k-appt__weekday" aria-hidden="true">${wd(x.date)}</span><span class="k-appt__date" aria-hidden="true">${n(jd)}</span><span class="k-appt__month" aria-hidden="true">${JALALI_MONTHS[jm - 1]}</span><span class="k-appt__free" aria-hidden="true">${x.closed ? "تعطیل" : x.free ? `${n(x.free)} نوبت` : "پر"}</span></button>`;
+        }).join("");
+        const selDay = !!this.selected && same(this.selected.date, cur.date);
+        const focusTime = selDay ? this.selected.time : cur.slots.find((s) => s.available)?.time;
+        const slotsHtml = cur.closed || !cur.free
+            ? `<p class="k-appt__empty">${cur.closed ? "این روز تعطیل است." : "نوبت خالی برای این روز نمانده است؛ روز دیگری را انتخاب کنید."}</p>`
+            : PERIODS.map(([title, until], k) => {
+                const slots = cur.slots.filter((s) => minutes(s.time) / 60 < until && minutes(s.time) / 60 >= (k ? PERIODS[k - 1][1] : 0));
+                if (!slots.length)
+                    return "";
+                const gid = `${this.key}-p${k}`;
+                return `<div class="k-appt__group"><p class="k-appt__period" id="${gid}">${title}</p><div class="k-appt__times" role="radiogroup" aria-labelledby="${gid}">${slots.map((s) => `<button type="button" role="radio" class="k-appt__time" data-time="${s.time}" aria-checked="${selDay && this.selected.time === s.time}" tabindex="${s.time === focusTime ? 0 : -1}"${s.available ? "" : " disabled"} aria-label="ساعت ${n(s.time)}${s.available ? "" : "، پر"}">${n(s.time)}</button>`).join("")}</div></div>`;
+            }).join("");
+        const name = this.getAttribute("name");
+        const sel = this.selected;
+        this.innerHTML = `<div class="k-appt" role="group" aria-labelledby="${this.key}-label"><p class="k-label" id="${this.key}-label" style="margin: 0">${esc(label)}</p><div class="k-appt__days" role="radiogroup" aria-label="روز">${daysHtml}</div><div class="k-appt__slots">${slotsHtml}</div><p class="k-appt__summary" aria-live="polite">${sel ? `${CLOCK}<span>نوبت شما: <strong>${formatJalali(sel.date, { style: "full", digits })}، ساعت ${n(sel.time)}</strong></span>` : ""}</p>${name ? `<input type="hidden" name="${esc(`${name}_date`)}" value="${sel ? toISODate(sel.date) : ""}"><input type="hidden" name="${esc(`${name}_time`)}" value="${sel?.time ?? ""}">` : ""}</div>`;
+        this.rendered = true;
+        const days = this.querySelector(".k-appt__days");
+        const times = this.querySelector(".k-appt__slots");
+        days.addEventListener("click", (e) => {
+            const b = e.target.closest(".k-appt__day");
+            if (!b || b.disabled)
+                return;
+            this.active = Number(b.dataset.i);
+            this.render("day");
+        });
+        times.addEventListener("click", (e) => {
+            const b = e.target.closest(".k-appt__time");
+            if (!b || b.disabled)
+                return;
+            this.selected = { date: cur.date, time: b.dataset.time };
+            this.render("time");
+            emit(this, "kashi-change", { date: toISODate(cur.date), time: this.selected.time, value: this.value });
+        });
+        days.addEventListener("keydown", (e) => this.roving(e, days, (b) => {
+            this.active = Number(b.dataset.i);
+            this.render("day");
+        }));
+        times.addEventListener("keydown", (e) => this.roving(e, times));
+        if (focus === "day")
+            days.querySelector('[tabindex="0"]')?.focus();
+        if (focus === "time")
+            times.querySelector('[aria-checked="true"]')?.focus();
+        if (focus === "day")
+            days.querySelector('[tabindex="0"]')?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+    // فوکوس گردشی؛ در RTL فلش چپ یعنی بعدی
+    roving(e, box, onMove) {
+        const items = [...box.querySelectorAll('[role="radio"]:not(:disabled)')];
+        const i = items.indexOf(document.activeElement);
+        if (i < 0)
+            return;
+        const rtl = getComputedStyle(box).direction === "rtl";
+        const step = { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1, ArrowDown: 1, ArrowUp: -1 }[e.key];
+        const to = step ? (i + step + items.length) % items.length : e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : -1;
+        if (to < 0)
+            return;
+        e.preventDefault();
+        if (onMove)
+            onMove(items[to]);
+        else
+            items[to].focus();
+    }
+}
+KashiAppointmentPicker.observedAttributes = ["start", "days", "from", "to", "step", "booked", "closed", "label", "name", "digits", "value"];
+define("kashi-appointment-picker", KashiAppointmentPicker, "block");

package/dist/base.js

@@ -13,6 +13,7 @@ export function define(tag, ctor, display = "inline") {
         BLOCK_TAGS.push(tag);
     if (display === "contents")
         CONTENTS_TAGS.push(tag);
+    upgradeProperties(ctor);
     customElements.define(tag, ctor);
     if (typeof document === "undefined")
         return;
@@ -25,9 +26,34 @@ export function define(tag, ctor, display = "inline") {
     const rules = [
         BLOCK_TAGS.length && `:where(${BLOCK_TAGS.join(",")}) { display: block; }`,
         CONTENTS_TAGS.length && `:where(${CONTENTS_TAGS.join(",")}) { display: contents; }`,
+        // display بالا قاعدهٔ hidden مرورگر را از کار می‌اندازد؛ عنصر پنهان‌شده باید پنهان بماند
+        `:where(${[...BLOCK_TAGS, ...CONTENTS_TAGS].join(",")})[hidden] { display: none; }`,
     ].filter(Boolean);
     style.textContent = `@layer kashi.elements { ${rules.join(" ")} }`;
 }
+/**
+ * ویژگی‌هایی که پیش از ثبت عنصر با JavaScript گذاشته شده‌اند (مثلاً Vue، یا element.data پیش از بارگذاری تنبل)
+ * روی خود نمونه می‌نشینند و setter کلاس را می‌پوشانند؛ پیش از اولین اتصال، از نمونه برداشته و دوباره از setter گذاشته می‌شوند.
+ */
+function upgradeProperties(ctor) {
+    const setters = new Set();
+    for (let p = ctor.prototype; p && p !== HTMLBase.prototype; p = Object.getPrototypeOf(p)) {
+        for (const [k, d] of Object.entries(Object.getOwnPropertyDescriptors(p)))
+            if (d.set)
+                setters.add(k);
+    }
+    const original = ctor.prototype.connectedCallback;
+    ctor.prototype.connectedCallback = function () {
+        for (const k of setters) {
+            if (!Object.prototype.hasOwnProperty.call(this, k))
+                continue;
+            const v = this[k];
+            delete this[k];
+            this[k] = v;
+        }
+        original?.call(this);
+    };
+}
 /**
  * فرزندان عنصر را پس از خوانده شدن کامل HTML در اختیار cb می‌گذارد.
  * اگر اسکریپت بدون type="module" در <head> باشد، عنصر پیش از فرزندانش به صفحه وصل می‌شود.

package/dist/basic.d.ts

@@ -0,0 +1,43 @@
+import { HTMLBase } from "./base.js";
+/**
+ * فیلد متنی کاشی با برچسب، راهنما و خطا؛ با clearable دکمهٔ پاک کردن، با type="password" دکمهٔ نمایش رمز،
+ * با show-count شمارندهٔ نویسه («۱۲ / ۱۰۰» با maxlength) و با loading اسپینر. input واقعی داخل عنصر است و با name مستقیم در فرم ارسال می‌شود.
+ */
+export declare class KashiInput extends HTMLBase {
+    static observedAttributes: string[];
+    protected multiline: boolean;
+    protected key: string;
+    protected control: HTMLInputElement | HTMLTextAreaElement;
+    private text;
+    private revealed;
+    private rendered;
+    private valueSet;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
+    get value(): string;
+    set value(v: string);
+    focus(options?: FocusOptions): void;
+    protected render(): void;
+    /** دکمه‌های انتهای فیلد، شمارنده و پیام‌ها */
+    private paint;
+}
+/** متن چندخطی کاشی؛ همان ویژگی‌های kashi-input به‌اضافهٔ rows و autoresize (ارتفاع خودکار) */
+export declare class KashiTextarea extends KashiInput {
+    static observedAttributes: string[];
+    protected multiline: boolean;
+}
+/**
+ * نوار اطلاعیهٔ بالای صفحه با tone (brand، warning یا error) و دکمهٔ بستن (dismissible).
+ * عنصرهای slot="actions" کنار متن و slot="icon" پیش از آن می‌آیند؛ با remember="کلید" بستن در همین مرورگر یادش می‌ماند.
+ */
+export declare class KashiBanner extends HTMLBase {
+    static observedAttributes: string[];
+    private box;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private read;
+    private build;
+    private decorate;
+    /** بستن اطلاعیه؛ با preventDefault روی رویداد kashi-close جلوی بستن گرفته می‌شود */
+    close(): void;
+}

package/dist/basic.js

@@ -0,0 +1,223 @@
+import { toFaDigits } from "@kashi-ui/persian";
+import { HTMLBase, ICONS, afterParse, bool, define, emit, esc, fieldHTML, setMessages, uid } from "./base.js";
+const EYE = (off) => `<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="M1.8 10S4.8 4.5 10 4.5 18.2 10 18.2 10 15.2 15.5 10 15.5 1.8 10 1.8 10Z"/><circle cx="10" cy="10" r="2.5"/>${off ? '<path d="m3 3 14 14"/>' : ""}</svg>`;
+const X = '<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><path d="m6 6 8 8M14 6l-8 8"/></svg>';
+/** ویژگی‌هایی که مستقیم روی input یا textarea داخلی می‌روند */
+const PASS = ["name", "placeholder", "autocomplete", "inputmode", "maxlength", "minlength", "pattern", "min", "max", "step", "dir", "spellcheck"];
+/**
+ * فیلد متنی کاشی با برچسب، راهنما و خطا؛ با clearable دکمهٔ پاک کردن، با type="password" دکمهٔ نمایش رمز،
+ * با show-count شمارندهٔ نویسه («۱۲ / ۱۰۰» با maxlength) و با loading اسپینر. input واقعی داخل عنصر است و با name مستقیم در فرم ارسال می‌شود.
+ */
+export class KashiInput extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.multiline = false;
+        this.key = uid("kashi-input");
+        this.text = "";
+        this.revealed = false;
+        this.rendered = false;
+        this.valueSet = false;
+    }
+    connectedCallback() {
+        if (!this.rendered && !this.valueSet)
+            this.text = this.getAttribute("value") ?? "";
+        this.render();
+    }
+    attributeChangedCallback(name, old, next) {
+        if (!this.rendered || old === next)
+            return;
+        if (name === "value")
+            this.value = next ?? "";
+        else {
+            this.text = this.control.value;
+            this.render();
+        }
+    }
+    get value() {
+        return this.rendered ? this.control.value : this.text;
+    }
+    set value(v) {
+        this.valueSet = true;
+        this.text = String(v ?? "");
+        if (this.rendered) {
+            this.control.value = this.text;
+            this.paint();
+        }
+    }
+    focus(options) {
+        this.control?.focus(options);
+    }
+    render() {
+        const id = this.key;
+        const ariaLabel = this.getAttribute("aria-label");
+        const label = this.getAttribute("label");
+        const type = this.getAttribute("type") ?? "text";
+        const size = this.getAttribute("size");
+        const disabled = this.hasAttribute("disabled");
+        const attrs = PASS.map((a) => (this.hasAttribute(a) ? ` ${a}="${esc(this.getAttribute(a))}"` : "")).join("");
+        const flags = `${this.hasAttribute("required") ? " required" : ""}${disabled ? " disabled" : ""}${this.hasAttribute("readonly") ? " readonly" : ""}${!label && ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ""}`;
+        const control = this.multiline
+            ? `<textarea id="${id}" class="k-input__control" rows="${Number(this.getAttribute("rows")) || 4}"${attrs}${flags}></textarea>`
+            : `<input id="${id}" class="k-input__control" type="${esc(type === "password" && this.revealed ? "text" : type)}"${attrs}${flags}>`;
+        const box = `<div class="k-input${this.multiline ? " k-input--textarea" : ""}${bool(this, "autoresize") ? " k-input--autoresize" : ""}${size === "sm" || size === "lg" ? ` k-input--${size}` : ""}" data-size="${size ?? "md"}"${disabled ? ' data-state="disabled"' : ""}>${control}<span class="k-input__end"></span></div>`;
+        const optional = this.getAttribute("optional");
+        this.querySelector(":scope > .k-field")?.remove();
+        this.insertAdjacentHTML("afterbegin", fieldHTML({ id, label, required: this.hasAttribute("required"), optional: optional === null ? null : optional || "اختیاری", control: box }));
+        this.control = this.querySelector(".k-input__control");
+        this.control.value = this.text;
+        this.control.addEventListener("input", () => {
+            this.paint();
+            emit(this, "kashi-change", { value: this.control.value });
+        });
+        this.querySelector(".k-input__end").addEventListener("click", (e) => {
+            const b = e.target.closest("button");
+            if (!b)
+                return;
+            if (b.dataset.act === "clear") {
+                this.control.value = "";
+                this.control.dispatchEvent(new Event("input", { bubbles: true }));
+                this.control.focus();
+                emit(this, "kashi-clear", {});
+            }
+            else if (b.dataset.act === "reveal") {
+                this.revealed = !this.revealed;
+                this.control.type = this.revealed ? "text" : "password";
+                this.paint();
+                b.focus();
+            }
+        });
+        this.rendered = true;
+        this.paint();
+    }
+    /** دکمه‌های انتهای فیلد، شمارنده و پیام‌ها */
+    paint() {
+        const el = this.control;
+        const len = el.value.length;
+        const off = this.hasAttribute("disabled") || this.hasAttribute("readonly");
+        const end = this.querySelector(".k-input__end");
+        const password = !this.multiline && this.getAttribute("type") === "password" && this.getAttribute("revealable") !== "false";
+        end.innerHTML = [
+            bool(this, "loading") ? '<span class="k-input__addon"><span class="k-spinner k-spinner--sm" role="status" aria-label="در حال بررسی"></span></span>' : "",
+            bool(this, "clearable") && len > 0 && !off ? `<button type="button" class="k-input__action" data-act="clear" aria-label="پاک کردن">${X}</button>` : "",
+            password ? `<button type="button" class="k-input__action" data-act="reveal" aria-label="${this.revealed ? "پنهان کردن رمز" : "نمایش رمز"}" aria-pressed="${this.revealed}">${EYE(this.revealed)}</button>` : "",
+        ].join("");
+        end.style.display = end.innerHTML ? "contents" : "none";
+        const field = this.querySelector(":scope > .k-field");
+        const countId = `${this.key}-count`;
+        setMessages(field, el, this.key, this.getAttribute("error"), this.getAttribute("hint"), bool(this, "show-count") ? countId : null);
+        if (bool(this, "show-count")) {
+            const max = Number(this.getAttribute("maxlength")) || 0;
+            let row = field.querySelector(":scope > .k-field__hint-row");
+            if (!row) {
+                row = document.createElement("div");
+                row.className = "k-field__hint-row";
+                row.innerHTML = '<div class="k-field__hints"></div>';
+                field.append(row);
+            }
+            row.insertAdjacentHTML("beforeend", `<span class="k-counter" id="${countId}"${max && len > max ? ' data-over=""' : ""}>${max ? `${toFaDigits(len)} / ${toFaDigits(max)}` : toFaDigits(len)}</span>`);
+        }
+    }
+}
+KashiInput.observedAttributes = ["label", "hint", "error", "type", "required", "disabled", "readonly", "clearable", "revealable", "show-count", "loading", "size", "optional", "aria-label", "value", ...PASS];
+/** متن چندخطی کاشی؛ همان ویژگی‌های kashi-input به‌اضافهٔ rows و autoresize (ارتفاع خودکار) */
+export class KashiTextarea extends KashiInput {
+    constructor() {
+        super(...arguments);
+        this.multiline = true;
+    }
+}
+KashiTextarea.observedAttributes = [...KashiInput.observedAttributes, "rows", "autoresize"];
+/**
+ * نوار اطلاعیهٔ بالای صفحه با tone (brand، warning یا error) و دکمهٔ بستن (dismissible).
+ * عنصرهای slot="actions" کنار متن و slot="icon" پیش از آن می‌آیند؛ با remember="کلید" بستن در همین مرورگر یادش می‌ماند.
+ */
+export class KashiBanner extends HTMLBase {
+    constructor() {
+        super(...arguments);
+        this.box = null;
+    }
+    connectedCallback() {
+        afterParse(() => {
+            if (!this.isConnected || this.box)
+                return;
+            const key = this.getAttribute("remember");
+            if (key && this.read(key)) {
+                this.hidden = true;
+                return;
+            }
+            this.build();
+        });
+    }
+    attributeChangedCallback() {
+        if (this.box)
+            this.decorate();
+    }
+    read(key) {
+        try {
+            return localStorage.getItem(`kashi-banner:${key}`) === "closed";
+        }
+        catch {
+            return false;
+        }
+    }
+    build() {
+        const icon = this.querySelector(":scope > [slot='icon']");
+        const actions = [...this.querySelectorAll(":scope > [slot='actions']")];
+        const rest = [...this.childNodes].filter((n) => n !== icon && !actions.includes(n));
+        const box = document.createElement("div");
+        box.setAttribute("role", "region");
+        if (icon) {
+            icon.removeAttribute("slot");
+            const s = document.createElement("span");
+            s.className = "k-banner__icon";
+            s.setAttribute("aria-hidden", "true");
+            s.append(icon);
+            box.append(s);
+        }
+        const text = document.createElement("p");
+        text.className = "k-banner__text";
+        text.append(...rest);
+        box.append(text);
+        if (actions.length) {
+            const a = document.createElement("div");
+            a.className = "k-banner__actions";
+            for (const el of actions) {
+                el.removeAttribute("slot");
+                a.append(el);
+            }
+            box.append(a);
+        }
+        this.replaceChildren(box);
+        this.box = box;
+        this.decorate();
+    }
+    decorate() {
+        const box = this.box;
+        const tone = this.getAttribute("tone");
+        box.className = `k-banner${tone && tone !== "neutral" ? ` k-banner--${tone}` : ""}${bool(this, "flush") ? " k-banner--flush" : ""}`;
+        box.setAttribute("aria-label", this.getAttribute("label") ?? "اطلاعیه");
+        box.querySelector(".k-banner__close")?.remove();
+        if (bool(this, "dismissible")) {
+            box.insertAdjacentHTML("beforeend", `<button type="button" class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-banner__close" aria-label="${esc(this.getAttribute("close-label") ?? "بستن اطلاعیه")}">${ICONS.close}</button>`);
+            box.querySelector(".k-banner__close").addEventListener("click", () => this.close());
+        }
+    }
+    /** بستن اطلاعیه؛ با preventDefault روی رویداد kashi-close جلوی بستن گرفته می‌شود */
+    close() {
+        const ev = new CustomEvent("kashi-close", { bubbles: true, cancelable: true, detail: {} });
+        if (!this.dispatchEvent(ev))
+            return;
+        this.hidden = true;
+        const key = this.getAttribute("remember");
+        if (key) {
+            try {
+                localStorage.setItem(`kashi-banner:${key}`, "closed");
+            }
+            catch { /* حالت خصوصی */ }
+        }
+    }
+}
+KashiBanner.observedAttributes = ["tone", "flush", "label", "dismissible", "close-label"];
+define("kashi-input", KashiInput, "block");
+define("kashi-textarea", KashiTextarea, "block");
+define("kashi-banner", KashiBanner, "block");

package/dist/calendar.d.ts

@@ -7,6 +7,17 @@ export declare class KashiCalendar extends HTMLBase {
     static observedAttributes: string[];
     /** غیرفعال کردن روزهای خاص، مثلاً (d) => d.getDay() === 5 */
     isDateDisabled?: (date: Date) => boolean;
+    /** حالت بازه: روزهای بین start و end برجسته می‌شوند؛ با start بدون end، hover پیش‌نمایش می‌دهد */
+    private rangeValue;
+    private hover;
+    get range(): {
+        start: Date | null;
+        end: Date | null;
+    } | null;
+    set range(r: {
+        start: Date | null;
+        end: Date | null;
+    } | null);
     /** نام تعطیلی هر روز؛ اگر ویژگی holidays گذاشته شود، تعطیلات ثابت ایران و جمعه‌ها */
     holidayOf?: (date: Date) => string | null | false | undefined;
     private selected;
@@ -34,6 +45,8 @@ export declare class KashiCalendar extends HTMLBase {
     private onClick;
     private onSelect;
     private onKey;
+    /** برجسته کردن روزهای بازه، بدون ساختن دوبارهٔ جدول تا فوکوس سر جایش بماند */
+    private paintRange;
     private render;
 }
 /**