@birdapi/velinstyle 0.7.0 → 0.8.0

package/components/sanitize.js

@@ -1,18 +1,37 @@
 const ESCAPE_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
 const ESCAPE_RE = /[&<>"']/g;
+const CONTROL_RE = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g;
+
+const ALLOWED_URL_PROTOCOLS = new Set(['http:', 'https:', 'data:', 'mailto:', 'tel:']);
+const BLOCKED_DATA_MIME = /^data:text\/html/i;
 
 export function escapeHTML(str) {
   if (typeof str !== 'string') return '';
   return str.replace(ESCAPE_RE, (ch) => ESCAPE_MAP[ch]);
 }
 
+export function stripControlChars(str) {
+  if (typeof str !== 'string') return '';
+  return str.replace(CONTROL_RE, '');
+}
+
+export function escapeHTMLAttribute(str) {
+  return escapeHTML(stripControlChars(str));
+}
+
 export function sanitizeURL(url) {
   if (typeof url !== 'string') return '';
+  const trimmed = url.trim();
+  if (/^\s*javascript:/i.test(trimmed) || /^\s*vbscript:/i.test(trimmed)) return '';
+  if (BLOCKED_DATA_MIME.test(trimmed)) return '';
   try {
-    const parsed = new URL(url, location.href);
-    if (['http:', 'https:', 'data:'].includes(parsed.protocol)) return url;
+    const parsed = new URL(trimmed, typeof location !== 'undefined' ? location.href : 'https://example.invalid/');
+    if (!ALLOWED_URL_PROTOCOLS.has(parsed.protocol)) return '';
+    if (parsed.protocol === 'data:' && BLOCKED_DATA_MIME.test(trimmed)) return '';
+    return trimmed;
+  } catch {
     return '';
-  } catch { return ''; }
+  }
 }
 
 let _policy = null;
@@ -26,3 +45,10 @@ export function getTrustedPolicy() {
   }
   return _policy;
 }
+
+export function createSafeHTML(str) {
+  const policy = getTrustedPolicy();
+  const safe = escapeHTML(stripControlChars(str));
+  if (policy?.createHTML) return policy.createHTML(safe);
+  return safe;
+}

package/components/shadow-a11y-styles.js

@@ -0,0 +1,18 @@
+/** Shared shadow DOM focus + target-size styles for VelinStyle web components. */
+export const SHADOW_A11Y_STYLES = `
+  :host { display: block; }
+  button, [role="button"] {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    cursor: pointer;
+  }
+  button:focus-visible, [role="button"]:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+  }
+  @media (forced-colors: active) {
+    button, [role="button"] {
+      border: 1px solid ButtonText;
+    }
+  }
+`;

package/components/velin-announcer.js

@@ -0,0 +1,35 @@
+const styles = `
+  :host { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+`;
+
+class VelinAnnouncer extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
+    const live = this.getAttribute('polite') === 'false' ? 'assertive' : 'polite';
+    this.shadowRoot.innerHTML =
+      '<style>' + styles + '</style>' +
+      '<div role="status" aria-live="' + live + '" aria-atomic="true" part="region"></div>';
+    this._region = this.shadowRoot.querySelector('[role="status"]');
+  }
+
+  announce(message, { assertive = false } = {}) {
+    if (!this._region) this.connectedCallback();
+    this._region.setAttribute('aria-live', assertive ? 'assertive' : 'polite');
+    this._region.textContent = '';
+    requestAnimationFrame(() => {
+      this._region.textContent = typeof message === 'string' ? message : '';
+    });
+  }
+
+  static announceGlobal(message, options) {
+    let el = document.querySelector('velin-announcer');
+    if (!el) {
+      el = document.createElement('velin-announcer');
+      document.body.appendChild(el);
+    }
+    el.announce(message, options);
+  }
+}
+
+customElements.define('velin-announcer', VelinAnnouncer);
+export default VelinAnnouncer;

package/components/velin-bottom-nav.js

@@ -0,0 +1,89 @@
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: block; }
+  nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    padding-block-end: max(var(--velin-space-2, 0.5rem), env(safe-area-inset-bottom, 0px));
+    background: var(--velin-color-surface-bright, #fff);
+    border-block-start: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted(a), ::slotted(button) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--velin-space-1, 0.25rem);
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem);
+    font-size: var(--velin-text-xs, 0.75rem);
+    color: var(--velin-color-text-muted, #666);
+    text-decoration: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  ::slotted([current]) {
+    color: var(--velin-color-primary, #2563eb);
+    font-weight: var(--velin-weight-semibold, 600);
+  }
+`;
+
+class VelinBottomNav extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._onSlot = this._onSlot.bind(this);
+  }
+
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Bottom navigation');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <nav role="navigation" aria-label="${label}"><slot></slot></nav>
+    `;
+    const slot = this.shadowRoot.querySelector('slot');
+    slot.addEventListener('slotchange', this._onSlot);
+    this._onSlot();
+  }
+
+  _onSlot() {
+    this._syncCurrent();
+  }
+
+  _syncCurrent() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return;
+    const hostKey = this.getAttribute('current');
+    slot.assignedElements().forEach((el) => {
+      const active =
+        el.hasAttribute('current') ||
+        (hostKey && (el.dataset.nav === hostKey || el.getAttribute('data-nav') === hostKey));
+      if (active) {
+        el.setAttribute('current', '');
+        el.setAttribute('aria-current', 'page');
+      } else {
+        el.removeAttribute('current');
+        el.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  static get observedAttributes() {
+    return ['aria-label', 'current'];
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'aria-label') {
+      const nav = this.shadowRoot?.querySelector('nav');
+      if (nav) nav.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Bottom navigation'));
+    }
+    if (name === 'current') this._syncCurrent();
+  }
+}
+
+customElements.define('velin-bottom-nav', VelinBottomNav);
+export default VelinBottomNav;

package/components/velin-combobox.js

@@ -0,0 +1,149 @@
+import { rovingTabindex } from './focus-manager.js';
+import { escapeHTML } from './sanitize.js';
+
+const styles = `
+  :host { display: inline-block; position: relative; }
+  .listbox {
+    position: absolute; z-index: var(--velin-z-dropdown, 100);
+    inset-block-start: 100%; inset-inline-start: 0;
+    min-inline-size: 100%; margin-block-start: var(--velin-space-1, 0.25rem);
+    padding-block: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    box-shadow: var(--velin-shadow-lg, 0 10px 15px rgba(0,0,0,0.08));
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .listbox { opacity: 1; visibility: visible; }
+  ::slotted([role="option"]) {
+    display: block; inline-size: 100%;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    text-align: start; background: none; border: none;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+  }
+  ::slotted([role="option"][aria-selected="true"]) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+
+class VelinCombobox extends HTMLElement {
+  static get observedAttributes() { return ['open', 'aria-label']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const listId = `velin-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+    this._listId = listId;
+    const listLabel = escapeHTML(this.getAttribute('aria-label') || 'Options');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot name="trigger"></slot>
+      <div class="listbox" id="${listId}" role="listbox" aria-label="${listLabel}" part="listbox"><slot></slot></div>
+    `;
+    const triggerSlot = this.shadowRoot.querySelector('slot[name="trigger"]');
+    triggerSlot.addEventListener('slotchange', () => this._wireTrigger());
+    this.shadowRoot.querySelector('slot:not([name])')?.addEventListener('slotchange', () => this._wireOptions());
+    this._wireTrigger();
+    this._wireOptions();
+    this.addEventListener('keydown', this._onKey);
+  }
+
+  _wireTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (!trigger) return;
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('aria-expanded', this.hasAttribute('open') ? 'true' : 'false');
+    trigger.setAttribute('aria-controls', this._listId);
+    trigger.setAttribute('aria-autocomplete', 'list');
+    if (!trigger.id) trigger.id = `velin-combobox-trigger-${Math.random().toString(36).slice(2, 9)}`;
+    const list = this.shadowRoot.querySelector('.listbox');
+    if (list) list.setAttribute('aria-labelledby', trigger.id);
+    if (!trigger.dataset.velinComboWired) {
+      trigger.dataset.velinComboWired = '1';
+      trigger.addEventListener('click', () => this.toggle());
+      trigger.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown' || e.key === 'Enter') { e.preventDefault(); this.open(); }
+      });
+    }
+  }
+
+  _wireOptions() {
+    const options = this._getOptions();
+    options.forEach((el, i) => {
+      el.setAttribute('role', 'option');
+      el.setAttribute('aria-selected', el.hasAttribute('selected') ? 'true' : 'false');
+      el.setAttribute('tabindex', i === 0 ? '0' : '-1');
+    });
+  }
+
+  _getOptions() {
+    const slot = this.shadowRoot.querySelector('slot:not([name])');
+    return slot ? slot.assignedElements().filter((el) => !el.hidden) : [];
+  }
+
+  toggle() { this.hasAttribute('open') ? this.close() : this.open(); }
+
+  open() {
+    this.setAttribute('open', '');
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) trigger.setAttribute('aria-expanded', 'true');
+    document.addEventListener('click', this._onDocClick, true);
+    requestAnimationFrame(() => {
+      const opts = this._getOptions();
+      if (opts.length) opts[0].focus();
+    });
+  }
+
+  close() {
+    this.removeAttribute('open');
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger) { trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); }
+    document.removeEventListener('click', this._onDocClick, true);
+    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
+  }
+
+  _onDocClick(e) {
+    if (!this.contains(e.target)) this.close();
+  }
+
+  _onKey(e) {
+    if (!this.hasAttribute('open')) return;
+    if (e.key === 'Escape') { this.close(); return; }
+    const options = this._getOptions();
+    if (!options.length) return;
+    rovingTabindex(this, options, e);
+    if (e.key === 'Enter' && options.includes(e.target)) {
+      this._selectOption(e.target);
+      this.close();
+    }
+  }
+
+  _selectOption(el) {
+    this._getOptions().forEach((o) => o.setAttribute('aria-selected', o === el ? 'true' : 'false'));
+    const trigger = this.shadowRoot.querySelector('slot[name="trigger"]')?.assignedElements()[0];
+    if (trigger && 'value' in trigger) trigger.value = el.textContent?.trim() || '';
+    this.dispatchEvent(new CustomEvent('velin-select', { bubbles: true, detail: { option: el } }));
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'open') this._wireTrigger();
+    if (name === 'aria-label') {
+      const list = this.shadowRoot?.querySelector('.listbox');
+      if (list) list.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Options'));
+    }
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onDocClick, true);
+  }
+}
+
+customElements.define('velin-combobox', VelinCombobox);
+export default VelinCombobox;

package/components/velin-command.js

@@ -0,0 +1,127 @@
+import { trapFocus, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } 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: contents; }
+  .overlay {
+    position: fixed; inset: 0; z-index: var(--velin-z-modal, 500);
+    display: flex; align-items: flex-start; justify-content: center;
+    padding: 10vh var(--velin-space-4, 1rem) var(--velin-space-4, 1rem);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0; visibility: hidden;
+    transition: opacity 150ms ease, visibility 150ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .panel {
+    inline-size: min(32rem, 100%);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem);
+    box-shadow: var(--velin-shadow-xl, 0 20px 25px rgba(0,0,0,0.1));
+    overflow: hidden;
+  }
+  .search {
+    inline-size: 100%; padding: var(--velin-space-4, 1rem);
+    border: none; border-bottom: 1px solid var(--velin-color-border, #ddd);
+    font-size: var(--velin-text-base, 1rem);
+    background: transparent;
+    color: var(--velin-color-text, #111);
+  }
+  .results { max-block-size: 20rem; overflow-y: auto; padding: var(--velin-space-2, 0.5rem); }
+  ::slotted(button) {
+    display: flex; inline-size: 100%;
+    padding: var(--velin-space-3, 0.75rem) var(--velin-space-4, 1rem);
+    min-block-size: 2.5rem;
+    border: none; background: none; text-align: start;
+    cursor: pointer; font-size: var(--velin-text-base, 1rem);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+  }
+  ::slotted(button[hidden]) { display: none; }
+  ::slotted(button:focus-visible) {
+    background: var(--velin-color-surface-dim, #eee);
+  }
+`;
+
+class VelinCommand extends HTMLElement {
+  static get observedAttributes() { return ['open']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+    this._onInput = this._onInput.bind(this);
+  }
+
+  connectedCallback() {
+    const placeholder = escapeHTML(this.getAttribute('placeholder') || 'Search commands…');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay">
+        <div class="panel" role="dialog" aria-modal="true" aria-label="Command palette" part="panel">
+          <input class="search" type="search" autocomplete="off" placeholder="${placeholder}" aria-label="Search" part="search" />
+          <div class="results" part="results"><slot></slot></div>
+        </div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.search').addEventListener('input', this._onInput);
+    this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._filter(''));
+    this._filter('');
+  }
+
+  attributeChangedCallback(name) {
+    if (name === 'open') this.hasAttribute('open') ? this._open() : this._close();
+  }
+
+  open() { this.setAttribute('open', ''); }
+  close() {
+    this.removeAttribute('open');
+    this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
+  }
+
+  _open() {
+    this._prev = saveFocus();
+    setBackgroundInert(this);
+    document.addEventListener('keydown', this._onKey);
+    requestAnimationFrame(() => {
+      this.shadowRoot.querySelector('.search')?.focus();
+      this._filter('');
+    });
+  }
+
+  _close() {
+    document.removeEventListener('keydown', this._onKey);
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+    const input = this.shadowRoot.querySelector('.search');
+    if (input) input.value = '';
+    this._filter('');
+  }
+
+  _onInput(e) {
+    this._filter(e.target.value);
+  }
+
+  _filter(query) {
+    const q = query.trim().toLowerCase();
+    const slot = this.shadowRoot.querySelector('slot');
+    slot?.assignedElements().forEach((btn) => {
+      const text = btn.textContent?.trim().toLowerCase() || '';
+      const match = !q || text.includes(q);
+      btn.hidden = !match;
+    });
+  }
+
+  _onKey(e) {
+    if (e.key === 'Escape') { this.close(); return; }
+    trapFocus(this.shadowRoot, e);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-command', VelinCommand);
+export default VelinCommand;

package/components/velin-counter.js

@@ -0,0 +1,152 @@
+/*
+ * <velin-counter from="0" to="61840" duration="900" format="currency" currency="EUR">
+ *
+ * Animated count-up/down using requestAnimationFrame plus an exponential
+ * ease-out for the classic "money fly-in" effect. Renders the current value
+ * as text content inside the element (light DOM), so it inherits typography
+ * tokens automatically.
+ *
+ * Attributes:
+ *   from        starting value (default 0)
+ *   to          target value
+ *   duration    ms (default 900)
+ *   decimals    fixed decimal places
+ *   prefix      string before the number
+ *   suffix      string after the number
+ *   format      "number" (default) | "currency" | "percent"
+ *   currency    ISO code (default EUR), used when format=currency
+ *   locale      BCP47 locale (default browser default)
+ *   autostart   "false" disables auto-start on connect/intersect
+ *
+ * Public API:
+ *   start(): runs the animation from `from` to `to`.
+ *   reset(): jumps back to `from` without animating.
+ */
+
+const easeOutExpo = (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t));
+
+function buildFormatter(host) {
+  const format = (host.getAttribute('format') || 'number').toLowerCase();
+  const locale = host.getAttribute('locale') || undefined;
+  const decimalsAttr = host.getAttribute('decimals');
+  const decimals = decimalsAttr != null ? Math.max(0, Number.parseInt(decimalsAttr, 10) || 0) : null;
+  const opts = {};
+  if (decimals != null) {
+    opts.minimumFractionDigits = decimals;
+    opts.maximumFractionDigits = decimals;
+  }
+  if (format === 'currency') {
+    opts.style = 'currency';
+    opts.currency = host.getAttribute('currency') || 'EUR';
+  } else if (format === 'percent') {
+    opts.style = 'percent';
+  }
+  try {
+    return new Intl.NumberFormat(locale, opts);
+  } catch {
+    return new Intl.NumberFormat(undefined, opts);
+  }
+}
+
+class VelinCounter extends HTMLElement {
+  static get observedAttributes() {
+    return ['from', 'to', 'duration', 'decimals', 'prefix', 'suffix', 'format', 'currency', 'locale'];
+  }
+
+  constructor() {
+    super();
+    this._rafId = 0;
+    this._started = false;
+    this._observer = null;
+  }
+
+  connectedCallback() {
+    this._render(this._fromValue());
+    if (this.getAttribute('autostart') === 'false') return;
+    this._scheduleStart();
+  }
+
+  disconnectedCallback() {
+    cancelAnimationFrame(this._rafId);
+    this._observer?.disconnect();
+  }
+
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (name === 'to' || name === 'from') {
+      this.start();
+    } else {
+      this._render(this._lastValue ?? this._toValue());
+    }
+  }
+
+  _fromValue() {
+    return Number.parseFloat(this.getAttribute('from')) || 0;
+  }
+  _toValue() {
+    return Number.parseFloat(this.getAttribute('to')) || 0;
+  }
+  _duration() {
+    return Math.max(0, Number.parseFloat(this.getAttribute('duration')) || 900);
+  }
+
+  _scheduleStart() {
+    if (this._started) return;
+    if (typeof IntersectionObserver === 'undefined') {
+      this.start();
+      return;
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          this.start();
+          this._observer.disconnect();
+          this._observer = null;
+          break;
+        }
+      }
+    }, { threshold: 0.2 });
+    this._observer.observe(this);
+  }
+
+  start() {
+    cancelAnimationFrame(this._rafId);
+    this._started = true;
+    const from = this._fromValue();
+    const to = this._toValue();
+    const duration = this._duration();
+    const reduced = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduced || duration === 0) {
+      this._render(to);
+      return;
+    }
+    const start = performance.now();
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration);
+      const value = from + (to - from) * easeOutExpo(t);
+      this._render(value);
+      if (t < 1) this._rafId = requestAnimationFrame(tick);
+    };
+    this._rafId = requestAnimationFrame(tick);
+  }
+
+  reset() {
+    cancelAnimationFrame(this._rafId);
+    this._started = false;
+    this._render(this._fromValue());
+  }
+
+  _render(value) {
+    this._lastValue = value;
+    const formatter = buildFormatter(this);
+    const prefix = this.getAttribute('prefix') || '';
+    const suffix = this.getAttribute('suffix') || '';
+    this.textContent = `${prefix}${formatter.format(value)}${suffix}`;
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('velin-counter')) {
+  customElements.define('velin-counter', VelinCounter);
+}
+
+export default VelinCounter;