rough sheet web component

work in progress summer 2025

This is a UI "sheet" familiar from mobile interfaces where you drag -> open a panel from one side and it'll smoothly animate and snap into either open or closed state.

Tweak the behaviour through HTML attributes

• direction: "bottom" | "top" | "left" | "right"
• snap-threshold: Number (percentage, e.g., "30" = 30%)
• velocity-threshold: Number (px/ms, e.g., "0.6" = 0.6 px/ms)

Control it via methods

• sheet.open() - Programmatically open
• sheet.close() - Programmatically close

Listen to events

• sheet-open - Fired when sheet opens
• sheet-close - Fired when sheet closes
• sheet-drag - Fired during drag (detail.progress)