Dialog، Drawer، Accordion، Tabs و Toast

<button ui="danger" commandfor="dlg-delete" command="show-modal">حذف محصول…</button>
<dialog id="dlg-delete" ui="modal">
  <header><h2>این محصول حذف شود؟</h2><button ui="icon small" commandfor="dlg-delete" command="close" aria-label="بستن"><bana-icon name="close"></bana-icon></button></header>
  <p>این کار قابل بازگشت نیست.</p>
  <footer>
    <button ui="ghost" commandfor="dlg-delete" command="close">انصراف</button>
    <button ui="danger" commandfor="dlg-delete" command="close">حذف</button>
  </footer>
</dialog>

<button ui="secondary" commandfor="dlg-drawer" command="show-modal"><bana-icon name="menu"></bana-icon> باز کردن منو</button>
<dialog id="dlg-drawer" ui="drawer">
  <header><h2>تنظیمات</h2><button ui="icon small" commandfor="dlg-drawer" command="close" aria-label="بستن"><bana-icon name="close"></bana-icon></button></header>
  <div ui="stack">
    <label ui="check"><input type="checkbox" role="switch" checked><span>اعلان‌ها</span></label>
    <label ui="field"><span>نام نمایشی</span><input value="علی"></label>
  </div>
  <footer><button ui="primary" commandfor="dlg-drawer" command="close">ذخیره</button></footer>
</dialog>

<div ui="accordion">
  <details name="faq" open><summary>Bana به چه چیزی وابسته است؟</summary><p>به هیچ چیز؛ فقط CSS و یک فایل JS اختیاری.</p></details>
  <details name="faq"><summary>آیا RTL پشتیبانی می‌شود؟</summary><p>بله، RTL درجه اول است.</p></details>
  <details name="faq"><summary>تم تاریک چطور؟</summary><p>با data-theme="dark" یا system.</p></details>
</div>

<div ui="tabs">
  <div role="tablist" aria-label="نمونه">
    <button role="tab" aria-selected="true">نمای کلی</button>
    <button role="tab">جزئیات</button>
    <button role="tab">تاریخچه</button>
  </div>
  <div role="tabpanel"><p>محتوای نمای کلی.</p></div>
  <div role="tabpanel"><p>محتوای جزئیات.</p></div>
  <div role="tabpanel"><p>محتوای تاریخچه.</p></div>
</div>

<div ui="cluster">
  <button ui="secondary" data-toast="info">اطلاعات</button>
  <button ui="success" data-toast="success">موفقیت</button>
  <button ui="warning" data-toast="warning">هشدار</button>
  <button ui="danger" data-toast="danger">خطا (ماندگار)</button>
</div>

Bana.toast("ذخیره شد");
Bana.toast({ type: "success", title: "موفق", message: "کاربر ساخته شد", timeout: 4000 });
const t = Bana.toast({ type: "danger", message: "اتصال قطع شد" });   // errors stay until dismissed
t.close();