{"repo":"viliket/pure-web-bottom-sheet","free":true,"listed":false,"github":"https://github.com/viliket/pure-web-bottom-sheet","clone":"git clone https://github.com/viliket/pure-web-bottom-sheet.git","description":"A performant, lightweight, and accessible bottom sheet web component powered by CSS scroll snap and CSS scroll-driven animations. Works with any framework, supports SSR, multiple snap points, and nested scrolling mode.","language":"TypeScript","stars":59,"topics":["accessibility","bottom-sheet","css-scroll-snap","drawer","framework-agnostic","modal","vanilla-js","web-components"],"license":"MIT","category":"ui-components","readme_excerpt":"pure-web-bottom-sheet A lightweight, framework-agnostic bottom sheet component leveraging CSS scroll snap and implemented as a Web Component. Its key features include: - Native scroll-driven sheet movement and snap points - uses the browser’s own scroll mechanics instead of JavaScript-driven animations to adjust the sheet position through CSS scroll snapping - Near Zero-JavaScript operation on modern browsers - core functionality is pure CSS - Framework-agnostic - works with any framework or vanilla HTML - Easy customization with a simple API - Accessibility through native elements (Dialog or Popover API) supporting touch, keyboard, or mouse scrolling - Server-side rendering (SSR) compatible with declarative Shadow DOM support - Cross-browser support - tested on Chrome, Safari, and Firefox (desktop and mobile) The component uses CSS scroll snap and CSS scroll-driven animations for its core functionality. It uses minimal JavaScript for backward compatibility and optional features, such as swipe-to-dismiss. Relying on browser-driven scrolling physics ensures a native-like feel across different browsers and a performant implementation by not relying on JavaScript-driven animation logic. For server-side rendering or static site generation, the component includes declarative Shadow DOM templates to avoid flash of unstyled content (FOUC) when displaying the bottom sheet initially open on page load. For technical details behind the implementation, read Native-like bottom sheets on t","default_branch":null,"files":null,"tree":[],"storefront":"/r/viliket","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/viliket/pure-web-bottom-sheet/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}