A modern, accessible popover component built with Lit
npm install @creaditor/popoverA modern, accessible popover component built with Lit, featuring smooth animations, flexible positioning, and keyboard navigation support.
- 🎨 Modern, clean design with smooth animations
- 📱 Responsive positioning that adapts to viewport bounds
- 🔄 Flexible placement options (top, bottom, left, right)
- ⌨️ Keyboard navigation support (Escape to close)
- 🎯 Click-outside-to-close functionality
- 🌐 Accessible and semantic HTML structure
- 🎭 Smooth backdrop and content animations
- 📏 Customizable width and z-index management
``bash`
npm install @creaditor/popover
Then import in your JavaScript/TypeScript:
`javascript`
import '@creaditor/popover';
You can use the component directly from a CDN without any build step:
` Hello from CDN!html
`
Alternative CDN sources:
- jsDelivr (recommended): https://cdn.jsdelivr.net/npm/@creaditor/popover@1.0.9/dist/popover.es.js
- unpkg:
> Note: Always specify a version number (e.g., @1.0.9) in production to ensure consistency.
` This is the popover content!html
This popover appears above the trigger
This popover has a custom width of 300px
`
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| opened | Boolean | false | Whether the popover is currently open |placement
| | 'top' \| 'bottom' \| 'left' \| 'right' | 'bottom' | The placement of the popover relative to the trigger |width
| | String | "" | Custom width for the popover content |
| Method | Description |
|--------|-------------|
| open() | Opens the popover |close()
| | Closes the popover |toggle()
| | Toggles the popover open/closed state |
The component doesn't emit custom events, but you can listen to the opened property changes:
`javascript`
const popover = document.querySelector('cdtr-popover');
popover.addEventListener('opened-changed', (e) => {
console.log('Popover opened:', e.detail.value);
});
The component uses CSS custom properties and can be styled using standard CSS. The popover features:
- Smooth scale and fade animations
- Responsive positioning
- Modern shadow effects
- Backdrop overlay
- Arrow indicators for each placement
The component is built using modern web standards and works in all modern browsers that support:
- Custom Elements
- Shadow DOM
- CSS Grid
- CSS Flexbox
- CSS Transforms
- lit - For web component functionality@lit-labs/signals` - For reactive state management
-
MIT