@birdapi/velinstyle 0.7.0 → 0.9.0

package/components/velin-menubar.js

@@ -0,0 +1,83 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: block; }
+  .menubar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-2, 0.5rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted([role="menuitem"]) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    background: none;
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--velin-text-base, 1rem);
+    color: var(--velin-color-text, #111);
+  }
+  ::slotted([role="menuitem"]:hover) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+
+class VelinMenubar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Menu bar');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="menubar" role="menubar" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener('keydown', this._onKey);
+    this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._init());
+    this._init();
+  }
+
+  _getItems() {
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot ? slot.assignedElements().filter((el) => !el.hasAttribute('disabled')) : [];
+  }
+
+  _init() {
+    const items = this._getItems();
+    items.forEach((el, i) => {
+      if (!el.hasAttribute('role')) el.setAttribute('role', 'menuitem');
+      el.setAttribute('tabindex', i === 0 ? '0' : '-1');
+    });
+  }
+
+  _onKey(e) {
+    const items = this._getItems();
+    if (items.includes(e.target)) rovingTabindex(this, items, e);
+  }
+
+  static get observedAttributes() { return ['aria-label']; }
+
+  attributeChangedCallback(name) {
+    if (name === 'aria-label') {
+      const bar = this.shadowRoot?.querySelector('.menubar');
+      if (bar) bar.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Menu bar'));
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-menubar', VelinMenubar);
+export default VelinMenubar;

package/components/velin-modal.js

@@ -98,14 +98,17 @@ class VelinModal extends HTMLElement {
   }
 
   connectedCallback() {
-    const title = this.getAttribute('title') || '';
+    const title = (this.getAttribute('title') || '').trim();
     const safeTitle = escapeHTML(title);
+    const dialogLabel = title
+      ? 'aria-labelledby="velin-modal-title"'
+      : `aria-label="${escapeHTML(this.getAttribute('aria-label') || 'Dialog')}"`;
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay">
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="velin-modal-title" part="dialog">
+        <div class="dialog" role="dialog" aria-modal="true" ${dialogLabel} part="dialog">
           <div class="header" part="header">
-            <h2 class="title" id="velin-modal-title">${safeTitle}</h2>
+            <h2 class="title" id="velin-modal-title"${title ? '' : ' class="velin-sr-only"'}>${safeTitle || 'Dialog'}</h2>
             <button class="close-btn" aria-label="Close" part="close">&#215;</button>
           </div>
           <div class="body" part="body"><slot></slot></div>

package/components/velin-popover.js

@@ -50,24 +50,52 @@ class VelinPopover extends HTMLElement {
     const role = triggerType === 'hover' ? 'tooltip' : 'dialog';
     this._isDialog = role === 'dialog';
 
+    const titleId = title ? `${this._popoverId}-title` : '';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <slot name="trigger"></slot>
-      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover">
-        ${title ? `<div class="popover__title" part="title">${escapeHTML(title)}</div>` : ''}
+      <div class="popover popover--${placement}" id="${this._popoverId}" role="${role}" part="popover"${titleId ? ` aria-labelledby="${titleId}"` : ''}>
+        ${title ? `<div class="popover__title" id="${titleId}" part="title">${escapeHTML(title)}</div>` : ''}
         <slot></slot>
       </div>
     `;
+    const popoverEl = this.shadowRoot.querySelector('.popover');
+    if (!title && popoverEl) {
+      const fallback =
+        this.getAttribute('aria-label') ||
+        (role === 'tooltip' ? 'Tooltip' : 'Popover');
+      popoverEl.setAttribute('aria-label', fallback);
+    }
 
     const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
     triggerSlot.addEventListener('slotchange', () => this._wireTrigger(triggerType));
     this._wireTrigger(triggerType);
   }
 
+  _ensureTriggerInteractive(trigger) {
+    const tag = trigger.tagName;
+    if (tag !== 'BUTTON' && tag !== 'A' && trigger.getAttribute('role') !== 'button') {
+      trigger.setAttribute('role', 'button');
+      if (!trigger.hasAttribute('tabindex')) trigger.setAttribute('tabindex', '0');
+    }
+  }
+
+  _onTriggerKey(e) {
+    if (e.key === 'Escape') {
+      this.close();
+      return;
+    }
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggle();
+    }
+  }
+
   _wireTrigger(triggerType) {
     const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
     if (!trigger) return;
 
+    this._ensureTriggerInteractive(trigger);
     const isHover = triggerType === 'hover';
     trigger.setAttribute('aria-haspopup', isHover ? 'true' : 'dialog');
     trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
@@ -75,6 +103,10 @@ class VelinPopover extends HTMLElement {
       trigger.setAttribute('aria-controls', this._popoverId);
     }
 
+    trigger.removeEventListener('keydown', this._onTriggerKeyBound);
+    this._onTriggerKeyBound = this._onTriggerKeyBound || this._onTriggerKey.bind(this);
+    trigger.addEventListener('keydown', this._onTriggerKeyBound);
+
     if (triggerType === 'click') {
       trigger.onclick = () => this.toggle();
     } else if (triggerType === 'hover') {

package/components/velin-rating.js

@@ -0,0 +1,91 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+import { SHADOW_A11Y_STYLES } from './shadow-a11y-styles.js';
+
+const styles = `
+  ${SHADOW_A11Y_STYLES}
+  :host { display: inline-block; }
+  .stars { display: inline-flex; gap: var(--velin-space-1, 0.25rem); }
+  button {
+    background: none; border: none; padding: var(--velin-space-1, 0.25rem);
+    font-size: 1.5rem; line-height: 1; cursor: pointer;
+    color: var(--velin-color-border, #ccc);
+  }
+  button[aria-checked="true"] { color: var(--velin-color-warning, #f59e0b); }
+`;
+
+const MAX = 5;
+
+class VelinRating extends HTMLElement {
+  static get observedAttributes() { return ['value']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `<style>${styles}</style><div class="stars" role="radiogroup"></div>`;
+    this._render();
+    this.shadowRoot.querySelector('.stars').addEventListener('click', this._onClick);
+    this.shadowRoot.querySelector('.stars').addEventListener('keydown', this._onKey);
+  }
+
+  _value() {
+    const v = parseInt(this.getAttribute('value') || '0', 10);
+    return Math.min(MAX, Math.max(0, Number.isNaN(v) ? 0 : v));
+  }
+
+  _render() {
+    const group = this.shadowRoot.querySelector('.stars');
+    const val = this._value();
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Rating');
+    group.setAttribute('aria-label', label);
+    group.innerHTML = '';
+    for (let i = 1; i <= MAX; i++) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.setAttribute('role', 'radio');
+      btn.setAttribute('aria-checked', i <= val ? 'true' : 'false');
+      btn.setAttribute('aria-label', escapeHTML(`${i} star${i > 1 ? 's' : ''}`));
+      btn.setAttribute('tabindex', i === (val || 1) ? '0' : '-1');
+      btn.dataset.value = String(i);
+      btn.textContent = i <= val ? '\u2605' : '\u2606';
+      group.appendChild(btn);
+    }
+  }
+
+  _getButtons() {
+    return [...this.shadowRoot.querySelectorAll('button[role="radio"]')];
+  }
+
+  _onClick(e) {
+    const btn = e.target.closest('button');
+    if (!btn) return;
+    this._setValue(parseInt(btn.dataset.value, 10));
+  }
+
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute('tabindex') === '0');
+      if (focused) this._setValue(parseInt(focused.dataset.value, 10));
+    }
+  }
+
+  _setValue(n) {
+    this.setAttribute('value', String(n));
+    this.dispatchEvent(new CustomEvent('velin-change', { bubbles: true, detail: { value: n } }));
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'value' && this.shadowRoot?.querySelector('.stars')) this._render();
+  }
+}
+
+customElements.define('velin-rating', VelinRating);
+export default VelinRating;

package/components/velin-reveal.js

@@ -0,0 +1,22 @@
+/*
+ * velin-reveal.js — scroll-into-view reveal (delegates to core/motion).
+ */
+import { initMotion, initReveal as motionInitReveal, velinMotion } from '../core/motion/index.js';
+
+export { initMotion, velinMotion };
+export const initReveal = motionInitReveal;
+
+if (typeof document !== 'undefined') {
+  const autoInit = () => {
+    if (document.documentElement?.hasAttribute('data-velin-reveal-auto')) {
+      initMotion();
+    }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', autoInit, { once: true });
+  } else {
+    autoInit();
+  }
+}
+
+export default { initReveal, initMotion };

package/components/velin-scroll-top.js

@@ -30,7 +30,7 @@ class VelinScrollTop extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <button part="button" aria-label="Scroll to top">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
           <line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>
         </svg>
       </button>

package/components/velin-search.js

@@ -0,0 +1,267 @@
+import { createSearch, highlightHtml, SEARCH_CATEGORIES, resolveDocsSearchUrl } from '../core/search/index.js';
+import { escapeHTMLAttribute } from './sanitize.js';
+
+const CATEGORY_LABELS = {
+  docs: 'Documentation',
+  components: 'Components',
+  api: 'API',
+  examples: 'Examples',
+};
+
+class VelinSearch extends HTMLElement {
+  static get observedAttributes() {
+    return ['index', 'categories', 'min-chars', 'fuzzy', 'placeholder', 'debounce'];
+  }
+
+  constructor() {
+    super();
+    this._search = createSearch();
+    this._debounceTimer = null;
+    this._activeIndex = -1;
+    this._flatResults = [];
+    this._indexLoaded = false;
+    this._listId = `velin-search-listbox-${Math.random().toString(36).slice(2, 9)}`;
+    this._mounted = false;
+  }
+
+  connectedCallback() {
+    if (this._mounted) return;
+    this._mounted = true;
+    this._ensureMarkup();
+    this._loadIndex();
+    this._bindEvents();
+  }
+
+  disconnectedCallback() {
+    this._teardown?.();
+    this._mounted = false;
+  }
+
+  get indexUrl() {
+    return this.getAttribute('index') || '/search-index.json';
+  }
+
+  get minChars() {
+    return parseInt(this.getAttribute('min-chars') || '2', 10);
+  }
+
+  get fuzzy() {
+    const v = this.getAttribute('fuzzy');
+    return v === null ? 0.2 : parseFloat(v) || 0;
+  }
+
+  get categories() {
+    const raw = this.getAttribute('categories');
+    if (!raw) return null;
+    return raw.split(',').map((c) => c.trim()).filter((c) => SEARCH_CATEGORIES.includes(c));
+  }
+
+  get debounceMs() {
+    return parseInt(this.getAttribute('debounce') || '120', 10);
+  }
+
+  _ensureMarkup() {
+    if (this.querySelector('[data-velin-search-input]')) return;
+    const ph = escapeHTMLAttribute(this.getAttribute('placeholder') || 'Search…');
+    const label = escapeHTMLAttribute(this.getAttribute('aria-label') || 'Search');
+    this.innerHTML = `
+      <div class="velin-search">
+        <div class="velin-search__field">
+          <input type="search" class="velin-search__input" data-velin-search-input
+            placeholder="${ph}" autocomplete="off" role="combobox" aria-expanded="false"
+            aria-label="${label}" aria-controls="${this._listId}" aria-autocomplete="list" />
+        </div>
+        <div class="velin-search__status velin-visually-hidden" data-velin-search-status aria-live="polite" aria-atomic="true"></div>
+        <div class="velin-search__results" data-velin-search-results role="listbox"
+          id="${this._listId}" hidden></div>
+      </div>
+    `;
+  }
+
+  _inputEl() {
+    return this.querySelector('[data-velin-search-input]');
+  }
+
+  _resultsEl() {
+    return this.querySelector('[data-velin-search-results]');
+  }
+
+  async _loadIndex() {
+    try {
+      await this._search.loadIndex(this.indexUrl);
+      this._indexLoaded = true;
+    } catch {
+      this._indexLoaded = false;
+    }
+  }
+
+  _bindEvents() {
+    const input = this._inputEl();
+    const panel = this._resultsEl();
+    if (!input || !panel) return;
+
+    input.addEventListener('input', () => {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = setTimeout(() => this._runQuery(input.value), this.debounceMs);
+    });
+    input.addEventListener('focus', () => {
+      if (input.value.trim().length >= this.minChars) this._runQuery(input.value);
+    });
+    input.addEventListener('keydown', (e) => this._onKeydown(e, input, panel));
+
+    const onDocClick = (e) => {
+      if (!this.contains(e.target)) this._hide(panel, input);
+    };
+    document.addEventListener('click', onDocClick);
+    this._teardown = () => {
+      document.removeEventListener('click', onDocClick);
+      clearTimeout(this._debounceTimer);
+    };
+  }
+
+  async _runQuery(raw) {
+    const input = this._inputEl();
+    const panel = this._resultsEl();
+    if (!input || !panel) return;
+    const q = raw.trim();
+    if (q.length < this.minChars) {
+      this._hide(panel, input);
+      return;
+    }
+    if (!this._indexLoaded) await this._loadIndex();
+    const { groups } = this._search.query(q, {
+      minChars: this.minChars,
+      fuzzy: this.fuzzy,
+      categories: this.categories || undefined,
+      limit: 12,
+    });
+    this._activeIndex = -1;
+    this._renderResults(panel, input, q, groups);
+    if (this._flatResults.length) {
+      panel.hidden = false;
+      panel.classList.add('velin-search__results--open');
+      input.setAttribute('aria-expanded', 'true');
+    } else {
+      this._hide(panel, input);
+    }
+  }
+
+  _renderResults(panel, input, q, groups) {
+    panel.innerHTML = '';
+    const order = this.categories || [...SEARCH_CATEGORIES];
+    this._flatResults = [];
+    let globalIdx = 0;
+    for (const cat of order) {
+      const items = groups[cat];
+      if (!items?.length) continue;
+      const groupId = `${this._listId}-group-${cat}`;
+      const group = document.createElement('div');
+      group.setAttribute('role', 'group');
+      group.setAttribute('aria-labelledby', groupId);
+      const heading = document.createElement('div');
+      heading.className = 'velin-search__group-label';
+      heading.id = groupId;
+      heading.textContent = CATEGORY_LABELS[cat] || cat;
+      group.appendChild(heading);
+      for (const item of items) {
+        const a = document.createElement('a');
+        const navHref = resolveDocsSearchUrl(item.url);
+        if (navHref) a.href = navHref;
+        a.className = 'velin-search__item';
+        a.setAttribute('role', 'option');
+        a.id = `velin-search-opt-${globalIdx}`;
+        a.innerHTML =
+          `<span class="velin-search__title">${highlightHtml(item.title, q)}</span>` +
+          `<span class="velin-search__excerpt">${highlightHtml(item.excerpt || '', q)}</span>`;
+        a.addEventListener(
+          'click',
+          (e) => {
+            e.preventDefault();
+            if (navHref) window.location.assign(navHref);
+          },
+          true,
+        );
+        a.addEventListener('mouseenter', () => this._setActive(globalIdx, panel, input));
+        group.appendChild(a);
+        this._flatResults.push(item);
+        globalIdx++;
+      }
+      panel.appendChild(group);
+    }
+    const status = this._statusEl();
+    if (status) {
+      status.textContent = this._flatResults.length
+        ? `${this._flatResults.length} results`
+        : 'No results';
+    }
+  }
+
+  _statusEl() {
+    return this.querySelector('[data-velin-search-status]');
+  }
+
+  _setActive(idx, panel, input) {
+    this._activeIndex = idx;
+    panel.querySelectorAll('.velin-search__item').forEach((el, i) => {
+      el.classList.toggle('velin-search__item--active', i === idx);
+      if (i === idx) {
+        input.setAttribute('aria-activedescendant', el.id);
+        el.scrollIntoView({ block: 'nearest' });
+      }
+    });
+  }
+
+  _onKeydown(e, input, panel) {
+    if (e.key === 'Escape') {
+      this._hide(panel, input);
+      return;
+    }
+    if (!this._flatResults.length) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = this._activeIndex < this._flatResults.length - 1 ? this._activeIndex + 1 : 0;
+      this._setActive(next, panel, input);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = this._activeIndex > 0 ? this._activeIndex - 1 : this._flatResults.length - 1;
+      this._setActive(prev, panel, input);
+    } else if (e.key === 'Enter') {
+      const target = this._activeIndex >= 0 ? this._flatResults[this._activeIndex] : this._flatResults[0];
+      const navHref = target?.url ? resolveDocsSearchUrl(target.url) : '';
+      if (navHref) {
+        e.preventDefault();
+        window.location.assign(navHref);
+      }
+    }
+  }
+
+  _hide(panel, input) {
+    panel.hidden = true;
+    panel.classList.remove('velin-search__results--open');
+    input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant');
+    this._activeIndex = -1;
+  }
+}
+
+export default VelinSearch;
+
+if (typeof HTMLElement !== 'undefined' && typeof customElements !== 'undefined' && !customElements.get('velin-search')) {
+  customElements.define('velin-search', VelinSearch);
+}
+
+export function bindDeclarativeSearch(root = document) {
+  root.querySelectorAll('[velin-search-input]').forEach((input) => {
+    if (input.dataset.velinSearchBound) return;
+    input.dataset.velinSearchBound = '1';
+    let host = input.closest('velin-search');
+    if (!host) {
+      host = document.createElement('velin-search');
+      host.setAttribute('index', input.getAttribute('data-search-index') || '/search-index.json');
+      const results = input.parentElement?.querySelector('[velin-search-results]');
+      input.before(host);
+      host.appendChild(input);
+      if (results) host.appendChild(results);
+    }
+  });
+}

package/components/velin-secure-field.js

@@ -0,0 +1,99 @@
+import { escapeHTML, escapeHTMLAttribute, sanitizeInputType } from './sanitize.js';
+
+const styles = `
+  :host { display: block; }
+  label { display: block; font-size: var(--velin-text-sm); margin-block-end: var(--velin-space-1); }
+  input {
+    width: 100%;
+    min-height: 2.75rem;
+    padding: var(--velin-space-2) var(--velin-space-3);
+    font: inherit;
+    border: 1px solid var(--velin-color-border);
+    border-radius: var(--velin-radius-md);
+  }
+  input:focus-visible {
+    outline: 3px solid var(--velin-color-focus);
+    outline-offset: 2px;
+  }
+  .velin-field-help {
+    font-size: var(--velin-text-xs);
+    color: var(--velin-color-text-muted);
+    margin-block-start: var(--velin-space-1);
+  }
+`;
+
+async function encryptValue(plain, mode) {
+  if (mode !== 'aes-gcm' || !globalThis.crypto?.subtle) {
+    return JSON.stringify({ encoding: 'base64', payload: btoa(unescape(encodeURIComponent(plain))) });
+  }
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const key = await crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, false, ['encrypt']);
+  const encoded = new TextEncoder().encode(plain);
+  const cipher = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
+  return JSON.stringify({
+    encoding: 'aes-gcm',
+    iv: Array.from(iv),
+    cipher: Array.from(new Uint8Array(cipher)),
+  });
+}
+
+class VelinSecureField extends HTMLElement {
+  static get observedAttributes() {
+    return ['type', 'name', 'label', 'mode', 'autocomplete'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._onChange = null;
+  }
+
+  connectedCallback() {
+    if (!this._onChange) this.render();
+  }
+
+  disconnectedCallback() {
+    const input = this.shadowRoot?.querySelector('input');
+    if (input && this._onChange) input.removeEventListener('change', this._onChange);
+    this._onChange = null;
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.render();
+  }
+
+  render() {
+    const type = sanitizeInputType(this.getAttribute('type'));
+    const name = this.getAttribute('name') || 'secure';
+    const label = this.getAttribute('label') || 'Secure field';
+    const autocomplete = escapeHTMLAttribute(this.getAttribute('autocomplete') || 'off');
+    const id = `velin-secure-${Math.random().toString(36).slice(2, 9)}`;
+
+    const input = this.shadowRoot?.querySelector('input');
+    if (input && this._onChange) input.removeEventListener('change', this._onChange);
+
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <label for="${id}">${escapeHTML(label)}</label>
+      <input id="${id}" type="${type}" autocomplete="${autocomplete}" part="input" />
+      <p class="velin-field-help">Demo-only client encoding — use HTTPS and server-side crypto for real secrets.</p>
+    `;
+
+    const newInput = this.shadowRoot.querySelector('input');
+    this._onChange = async () => {
+      const mode = this.getAttribute('mode') || 'aes-gcm';
+      const payload = await encryptValue(newInput.value, mode);
+      this.dispatchEvent(new CustomEvent('velin-secure-submit', {
+        bubbles: true,
+        detail: { name, payload },
+      }));
+    };
+    newInput.addEventListener('change', this._onChange);
+  }
+}
+
+if (!customElements.get('velin-secure-field')) {
+  customElements.define('velin-secure-field', VelinSecureField);
+}
+
+export default VelinSecureField;