JavaScript API

import { VelinModal, VelinTabs } from 'velinstyle/components';

<script src="dist/velinstyle-components.iife.js"></script>

<script type="module"
  src="https://unpkg.com/@birdapi/velinstyle@0.8.0/dist/velinstyle-components.min.js">
</script>

const modal = document.querySelector('velin-modal');

// Attribute approach
modal.setAttribute('open', '');

// Property approach (equivalent)
modal.open();

const modal = document.querySelector('velin-modal');

// Open programmatically
modal.open();

// Listen for close
modal.addEventListener('velin-close', () => {
  console.log('Modal closed');
});

const toast = document.querySelector('velin-toast');

// Success toast
toast.show({
  message: 'Saved!',
  type: 'success',
  duration: 3000
});

// Error toast
toast.show({
  message: 'Something went wrong.',
  type: 'error',
  duration: 5000
});

const dialog = document.querySelector('velin-dialog');

// Alert
await dialog.alert('File uploaded successfully.');

// Confirm with danger styling
const confirmed = await dialog.confirm('Delete this item?', {
  danger: true
});
if (confirmed) {
  deleteItem();
}

// Prompt for input
const name = await dialog.prompt('Enter your name:', {
  placeholder: 'John Doe'
});
if (name !== null) {
  updateName(name);
}

const carousel = document.querySelector('velin-carousel');

carousel.next();
carousel.prev();
carousel.goTo(2);

carousel.addEventListener('velin-slide-change', (e) => {
  console.log('Active slide:', e.detail.index);
});

// Register a custom icon provider
VelinIcon.registerProvider('myicons',
  'https://cdn.example.com/icons/{name}.svg'
);

// List all registered providers
console.log(VelinIcon.providers);

// Use in HTML: <velin-icon provider="myicons" name="star"></velin-icon>

const stepper = document.querySelector('velin-stepper-wc');

stepper.next();
stepper.prev();
stepper.goTo(0);

stepper.addEventListener('velin-step-change', (e) => {
  console.log('Step:', e.detail.step);
});

const persist = document.querySelector('velin-persist');

persist.addEventListener('velin-persist-restore', (e) => {
  console.log('State restored:', e.detail);
});

persist.addEventListener('velin-persist-error', (e) => {
  console.error('Persist error:', e.detail.error);
});

// Clear all persisted state
persist.clear();

import {
  trapFocus,
  rovingTabindex,
  saveFocus,
  restoreFocus,
  getFocusableElements,
  setBackgroundInert,
  clearBackgroundInert
} from 'velinstyle/components';

import { trapFocus, saveFocus, restoreFocus } from 'velinstyle/components';

const panel = document.getElementById('custom-panel');
let savedFocus;

function openPanel() {
  savedFocus = saveFocus();
  panel.hidden = false;
  panel.addEventListener('keydown', (e) => trapFocus(panel, e));
  panel.querySelector('button').focus();
}

function closePanel() {
  panel.hidden = true;
  restoreFocus(savedFocus);
}

import { vibrate, applyHaptic, VelinHapticObserver } from 'velinstyle/components';

import { vibrate, applyHaptic, VelinHapticObserver } from 'velinstyle/components';

// Programmatic: trigger on form submit
document.querySelector('form').addEventListener('submit', () => {
  vibrate('success');
});

// Bind to a specific element
const btn = document.querySelector('#delete-btn');
applyHaptic(btn); // uses btn's haptic="error" attribute

// Auto-observe all [haptic] elements in the document
const observer = new VelinHapticObserver(document.body);
observer.observe();

<button class="velin-btn velin-btn-primary" haptic="tap">Save</button>
<button class="velin-btn velin-btn-danger" haptic="error">Delete</button>
<a href="/next" haptic="double-tap">Continue</a>

import { escapeHTML, sanitizeURL, getTrustedPolicy } from 'velinstyle/components';

import { escapeHTML, sanitizeURL } from 'velinstyle/components';

// Safe text insertion
const userInput = '<img src=x onerror=alert(1)>';
el.innerHTML = escapeHTML(userInput);
// Output: &lt;img src=x onerror=alert(1)&gt;

// Safe URL handling
const url = sanitizeURL('javascript:alert(1)');
// Returns '' (empty string — blocked)

const safeUrl = sanitizeURL('https://example.com');
// Returns 'https://example.com'

import type { VelinModal, VelinDialog, VelinToast } from 'velinstyle';

const modal = document.querySelector('velin-modal') as VelinModal;
modal.open();

const dialog = document.querySelector('velin-dialog') as VelinDialog;
const confirmed: boolean = await dialog.confirm('Proceed?');

// No cast needed — TypeScript knows the return type
const tabs = document.querySelector('velin-tabs');
// tabs is VelinTabs | null

tabs?.addEventListener('velin-tab-change', (e) => {
  // e.detail is fully typed
  console.log(e.detail.index, e.detail.tab);
});

import type { VelinTabChangeEvent, VelinCloseEvent } from 'velinstyle';

document.addEventListener('velin-tab-change', (e: VelinTabChangeEvent) => {
  console.log(e.detail.index);
});

document.addEventListener('velin-close', (e: VelinCloseEvent) => {
  console.log('Component closed:', e.target);
});