‏pure-web-bottom-sheet: باتم‌شیت وب تقریباً بدون جاوااسکریپت

pure-web-bottom-sheet یه کامپوننت سبک برای ساخت bottom sheet هست؛ یعنی همون پنلی که از پایین صفحه بالا میاد و با انگشت می‌کشیش. این کتابخونه به شکل Web Component (یعنی تگ HTML سفارشی که تو هر فریم‌ورکی کار می‌کنه) ساخته شده و حرف اصلیش اینه که هسته‌ش تقریباً فقط CSS هست.

به‌جای اینکه با جاوااسکریپت موقعیت پنل رو انیمیت کنه، از CSS scroll snap استفاده می‌کنه. یعنی پنل در واقع یه ناحیه‌ی اسکرول‌شونده‌ست و مرورگر خودش اونو روی نقطه‌های توقف (snap point) نگه می‌داره. برای افکت‌های همراه حرکت هم از CSS scroll-driven animations کمک می‌گیره. به گفته‌ی سازنده، چون فیزیک اسکرول مال خود مرورگره، حس حرکت تو همه‌ی مرورگرها طبیعی‌تره و کارایی هم بهتره.

جاوااسکریپت فقط برای سازگاری با مرورگرهای قدیمی‌تر و قابلیت‌های اختیاری مثل swipe-to-dismiss (بستن پنل با کشیدن به پایین) استفاده می‌شه. نقطه‌های توقف رو با چند div با slot="snap" و متغیر --snap تعریف می‌کنی و کلاس initial می‌گه پنل اول روی کدوم نقطه باز بشه. این نمونه‌ی خلاصه‌شده‌ی React از مستندات خود پروژه‌ست:

<BottomSheet tabIndex={0}>
  <div slot="snap" style={{ "--snap": "75%" }} />
  <div slot="snap" style={{ "--snap": "50%" }} className="initial" />
  <div slot="snap" style={{ "--snap": "25%" }} />
  <p>Custom content</p>
</BottomSheet>

برای دسترس‌پذیری از المنت‌های بومی مرورگر یعنی dialog یا Popover API استفاده می‌کنه، پس با لمس، کیبورد و ماوس کار می‌کنه. برای حالت مودال یه کامپوننت bottom-sheet-dialog-manager هم داره که پنل رو داخل dialog مدیریت می‌کنه. برای React کامپوننت‌های wrapper جدا داره و برای Astro و SSR هم قالب declarative Shadow DOM ارائه می‌ده.

با declarative Shadow DOM (یعنی تعریف Shadow DOM مستقیم تو HTML سرور، بدون نیاز به اجرای جاوااسکریپت)، اگه پنل موقع لود صفحه باز باشه، دیگه FOUC یا همون پرش صفحه‌ی بی‌استایل پیش نمیاد. این یعنی برای سایت‌های SSR یا static هم مشکلی نداره. کتابخونه روی Chrome، Safari و Firefox، هم دسکتاپ هم موبایل، تست شده.

نکات کلیدی:

• هسته‌ی کامپوننت روی CSS scroll snap و scroll-driven animations ساخته شده، نه انیمیشن جاوااسکریپتی.
• نقطه‌های توقف با slot="snap" و متغیر --snap تعریف می‌شن.
• swipe-to-dismiss قابلیت اختیاریه و به جاوااسکریپت نیاز داره.
• برای مودال از dialog بومی و bottom-sheet-dialog-manager استفاده می‌کنه.
• برای React و Astro پکیج‌های جدا داره و با SSR سازگاره.
• روی Chrome، Safari و Firefox دسکتاپ و موبایل تست شده.