@creaditor/popover

v1.0.10

Published

3 months ago

A modern, accessible popover component built with Lit

0High
0Medium
0Low

creaditor

adidui

popover web-component lit ui dropdown tooltip

Creaditor Popover Component

A modern, accessible popover component built with Lit, featuring smooth animations, flexible positioning, and keyboard navigation support.

Features

🎨 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

Installation

Via NPM

npm install @creaditor/popover

Then import in your JavaScript/TypeScript:

import '@creaditor/popover';

Via CDN

You can use the component directly from a CDN without any build step:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!-- Your popover component -->
  <cdtr-popover>
    <div slot="trigger">
      <button>Click me</button>
    </div>
    <div slot="content">
      <p>Hello from CDN!</p>
    </div>
  </cdtr-popover>

  <!-- Load from jsDelivr CDN (recommended) -->
  <script type="module">
    import 'https://cdn.jsdelivr.net/npm/@creaditor/[email protected]/dist/popover.es.js';
  </script>
</body>
</html>

Alternative CDN sources:

jsDelivr (recommended): https://cdn.jsdelivr.net/npm/@creaditor/[email protected]/dist/popover.es.js
unpkg: https://unpkg.com/@creaditor/[email protected]/dist/popover.es.js

Note: Always specify a version number (e.g., @1.0.9) in production to ensure consistency.

Usage

<!-- Basic usage -->
<cdtr-popover>
  <div slot="trigger">
    <button>Click me</button>
  </div>
  <div slot="content">
    <p>This is the popover content!</p>
  </div>
</cdtr-popover>

<!-- With custom placement -->
<cdtr-popover placement="top">
  <div slot="trigger">
    <button>Top placement</button>
  </div>
  <div slot="content">
    <p>This popover appears above the trigger</p>
  </div>
</cdtr-popover>

<!-- With custom width -->
<cdtr-popover width="300px">
  <div slot="trigger">
    <button>Wide popover</button>
  </div>
  <div slot="content">
    <p>This popover has a custom width of 300px</p>
  </div>
</cdtr-popover>

Properties

| 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 |

Methods

| Method | Description | |--------|-------------| | open() | Opens the popover | | close() | Closes the popover | | toggle() | Toggles the popover open/closed state |

Events

The component doesn't emit custom events, but you can listen to the opened property changes:

const popover = document.querySelector('cdtr-popover');
popover.addEventListener('opened-changed', (e) => {
  console.log('Popover opened:', e.detail.value);
});

Styling

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

Browser Support

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

Dependencies

lit - For web component functionality
@lit-labs/signals - For reactive state management

License

MIT