Web Components 1.2.2

VelinStyle provides 43 canonical Web Components (45 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. Deutsch: Web Components

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Interactive UI that needs focus traps, ARIA wiring, or imperative APIs (open(), show()).
Prefer register / bootFromDOM for production bundles; use the IIFE for quick demos.

When not

Do not invent undocumented tags or *-wc aliases for new code (legacy loaders only).
Do not claim React wrappers re-implement behaviour — @velinstyle/react is a thin adapter.

register / bootFromDOM

import { register, bootFromDOM } from '@birdapi/velinstyle';

await register(['velin-modal', 'velin-toast']);
await bootFromDOM(document, {
  attributes: true,  // bootAttributes + initMotion
  highlight: true,   // optional syntax highlighting
  haptic: false,
});

bootFromDOM scans for velin-* tags and data-velin-component, then registers only those loaders. Options wire core/attributes, core/highlight, and haptic observers.

Attribute bridges (e.g. velin-modal on a button) set data-velin-component and call lazyDefine — see HTML attributes.

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-data-table>`	Sortable, filterable, paginated tables — docs
`<velin-form-summary>`	Accessible validation error summary — 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 '@birdapi/velinstyle'; // see dist/velinstyle.d.ts

const dialog = document.querySelector('velin-dialog') as VelinDialog;
dialog.open();
</script>