VelinStyle Web Components
VelinStyle provides 36 canonical Web Components (38 lazy-loader entries including legacy velin-tooltip-wc and velin-stepper-wc). All use Shadow DOM or light DOM with XSS-safe escaping where content is dynamic.
Overview
All components are custom elements registered under the velin- prefix. Include the component bundle to use them:
<script type="module" src="../../dist/velinstyle-components.iife.js"></script>Component List
| Component | Description |
|---|---|
<velin-icon> | SVG icon from the built-in sprite |
<velin-dialog> | Accessible modal dialog with focus trapping |
<velin-drawer> | Slide-out panel from any edge |
<velin-dropdown> | Dropdown menu with keyboard navigation |
<velin-accordion> | Collapsible content sections |
<velin-tabs> | Tab panel with ARIA roles |
<velin-tooltip> | Contextual tooltip |
<velin-popover> | Rich popover content |
<velin-toast> | Toast notification manager |
<velin-carousel> | Touch-friendly carousel |
<velin-collapse> | Expandable/collapsible content |
<velin-scrollspy> | Scroll position link highlighting |
<velin-lightbox> | Fullscreen image/video gallery |
<velin-stepper> | Multi-step progress indicator |
<velin-countdown> | Live countdown timer — docs |
<velin-progress-ring> | Circular progress indicator |
<velin-copy> | One-click copy to clipboard — docs |
<velin-scroll-top> | Floating back-to-top button — docs |
<velin-theme-toggle> | Light/dark + theme picker — docs |
<velin-persist> | Auto-save form data to storage — docs |
<velin-modal> | Accessible modal with focus trapping |
Layout stability (CLS)
Before custom elements upgrade, src/base/wc-placeholder.css reserves min dimensions per display mode (block, inline, fixed, display:contents) so pages do not shift when scripts load. Included in the main CSS bundle.
All components ship with TypeScript definitions. Import types from dist/velinstyle.d.ts.
Focus Management
Components that overlay content (dialog, drawer, dropdown) automatically trap focus and restore it when closed — following WAI-ARIA best practices.
TypeScript
Type definitions are included in the npm package. Import types directly:
<script lang="ts">
import type { VelinDialog } from 'velinstyle/components';
const dialog = document.querySelector('velin-dialog') as VelinDialog;
dialog.open();
</script>