Web Components

VelinStyle provides 22 native Web Components that enhance standard HTML with interactive behavior — no framework required. All components are XSS-safe with built-in HTML escaping.

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-wc>`	Multi-step progress indicator
`<velin-countdown>`	Live countdown timer
`<velin-progress-ring>`	Circular progress indicator
`<velin-copy>`	One-click copy to clipboard
`<velin-scroll-top>`	Floating back-to-top button
`<velin-theme-toggle>`	Light/dark mode toggle
`<velin-persist>`	Auto-save form data to storage
`<velin-modal>`	Accessible modal with focus trapping

All components ship with TypeScript definitions and XSS-safe rendering via escapeHTML().

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>