Web Component UI Kit

ภาพรวม

Framework-agnostic UI components ที่ทำงานได้ใน React, Vue, Astro, และ vanilla HTML โดยไม่ต้องติดตั้ง dependency ใดๆ — สร้างด้วย Custom Elements + Shadow DOM ล้วน

Components ที่มีแล้ว

<ui-button>

<ui-button variant="primary" size="md">Save</ui-button>
<ui-button variant="ghost" disabled>Cancel</ui-button>
<ui-button variant="danger" loading>Deleting...</ui-button>

• Variants: primary, secondary, ghost, danger
• Sizes: sm, md, lg
• States: disabled, loading (spinner อัตโนมัติ)
• Keyboard accessible, focus-visible ring

<ui-badge>

<ui-badge color="green">Active</ui-badge>
<ui-badge color="blue" dot>Online</ui-badge>

<ui-tooltip>

<ui-tooltip content="คลิกเพื่อบันทึก" position="top">
  <button>Save</button>
</ui-tooltip>

• Positions: top, bottom, left, right
• Delay 300ms ก่อนแสดง
• คำนวณ position ใหม่ถ้าชนขอบหน้าจอ

กำลังทำ

• <ui-dialog> — modal dialog พร้อม focus trap และ scroll lock
• <ui-select> — custom dropdown ที่ keyboard navigable
• <ui-tabs> — accessible tab panel
• CSS custom properties สำหรับ theming: --ui-accent, --ui-radius

Design Decisions

• Shadow DOM mode: open — ให้ JS ข้างนอก inspect ได้ ง่ายต่อการ debug
• CSS custom properties inherit ผ่าน Shadow DOM — parent สามารถ theme ได้
• No build step — import ตรงจาก .js file ในกรณีใช้ CDN
• Zero dependencies — เป้าหมายคือ browser APIs ล้วนไม่มี polyfill

เทคโนโลยี

• Vanilla JavaScript ES2022
• Web Components (Custom Elements + Shadow DOM)
• CSS custom properties สำหรับ theming
• TypeScript type definitions แยก (.d.ts)