@birdapi/velinstyle 0.7.0 → 0.9.0

package/components/focus-manager.js

@@ -85,22 +85,59 @@ export function restoreFocus(element) {
   }
 }
 
-let _inertSiblings = [];
+/** @type {{ host: HTMLElement, siblings: Set<Element> }[]} */
+const _inertStack = [];
+let _overflowDepth = 0;
+let _savedOverflow = '';
+
+function activeInertElements() {
+  const out = new Set();
+  for (const layer of _inertStack) {
+    for (const el of layer.siblings) out.add(el);
+  }
+  return out;
+}
 
 export function setBackgroundInert(except) {
-  _inertSiblings = [];
+  const host = except instanceof HTMLElement ? except : null;
+  if (!host) return;
+
+  const siblings = new Set();
   for (const child of document.body.children) {
-    if (child === except || child.contains(except)) continue;
+    if (child === host || child.contains(host)) continue;
     if (!child.hasAttribute('inert')) {
       child.setAttribute('inert', '');
-      _inertSiblings.push(child);
+      siblings.add(child);
     }
   }
+
+  _inertStack.push({ host, siblings });
+
+  if (_overflowDepth === 0) {
+    _savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  _overflowDepth += 1;
 }
 
-export function clearBackgroundInert() {
-  for (const el of _inertSiblings) {
-    el.removeAttribute('inert');
+export function clearBackgroundInert(except) {
+  let idx = -1;
+  if (except instanceof HTMLElement) {
+    idx = _inertStack.findLastIndex((layer) => layer.host === except);
+  } else if (_inertStack.length) {
+    idx = _inertStack.length - 1;
+  }
+  if (idx === -1) return;
+
+  const { siblings } = _inertStack.splice(idx, 1)[0];
+  const stillNeeded = activeInertElements();
+  for (const el of siblings) {
+    if (!stillNeeded.has(el)) el.removeAttribute('inert');
+  }
+
+  _overflowDepth = Math.max(0, _overflowDepth - 1);
+  if (_overflowDepth === 0) {
+    document.body.style.overflow = _savedOverflow;
+    _savedOverflow = '';
   }
-  _inertSiblings = [];
 }

package/components/index.js

@@ -12,22 +12,51 @@ export { default as VelinScrollTop } from './velin-scroll-top.js';
 export { default as VelinCarousel } from './velin-carousel.js';
 export { default as VelinCollapse } from './velin-collapse.js';
 export { default as VelinScrollspy } from './velin-scrollspy.js';
-export { default as VelinTooltipWC } from './velin-tooltip-wc.js';
+export { default as VelinTooltip, VelinTooltipWC } from './velin-tooltip.js';
 export { default as VelinLightbox } from './velin-lightbox.js';
-export { default as VelinStepperWC } from './velin-stepper-wc.js';
+export { default as VelinStepper, VelinStepperWC } from './velin-stepper.js';
 export { default as VelinDialog } from './velin-dialog.js';
 export { default as VelinCountdown } from './velin-countdown.js';
 export { default as VelinProgressRing } from './velin-progress-ring.js';
 export { default as VelinPersist } from './velin-persist.js';
+export { default as VelinCombobox } from './velin-combobox.js';
+export { default as VelinBottomNav } from './velin-bottom-nav.js';
+export { default as VelinSheet } from './velin-sheet.js';
+export { default as VelinSegmentedControl } from './velin-segmented-control.js';
+export { default as VelinRating } from './velin-rating.js';
+export { default as VelinMenubar } from './velin-menubar.js';
+export { default as VelinCommand } from './velin-command.js';
+export { default as VelinAnnouncer } from './velin-announcer.js';
+export { default as VelinEmail } from './velin-email.js';
+export { register, lazyDefine, whenDefined, bootFromDOM } from './runtime/index.js';
+export { default as VelinSparkline } from './velin-sparkline.js';
+export { default as VelinCounter } from './velin-counter.js';
+export { default as VelinLiveDot } from './velin-live-dot.js';
+export { default as VelinCodeBlock } from './velin-code-block.js';
+export { default as VelinSearch } from './velin-search.js';
+export { bindDeclarativeSearch } from './velin-search.js';
+export { initReveal, initMotion, velinMotion } from './velin-reveal.js';
+export { initA11y, announce, getAnnouncer } from './a11y-entry.js';
+export { velinSearch, createSearch, registerSearchProvider } from '../core/search/index.js';
+export { bootAttributes, registerAttribute, listRegisteredAttributes } from '../core/attributes/index.js';
+export {
+  velinSyntax,
+  highlightElement,
+  highlightAll,
+  initHighlight,
+  observeCodeBlocks,
+  registerLanguage,
+  lazyLoadLanguage,
+  renderTokens,
+} from '../core/highlight/index.js';
+export { flipReorder, filterList } from './velin-flip.js';
+export { escapeHTML, escapeHTMLAttribute, sanitizeURL, stripControlChars, createSafeHTML, getTrustedPolicy } from './sanitize.js';
 export { VelinHapticObserver, vibrate, applyHaptic, PATTERNS as HapticPatterns } from './velin-haptic.js';
 export { trapFocus, rovingTabindex, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
 
-import { VelinHapticObserver } from './velin-haptic.js';
-if (typeof document !== 'undefined') {
-  const _hapticInit = () => { new VelinHapticObserver().start(document.body); };
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', _hapticInit);
-  } else {
-    _hapticInit();
-  }
-}
+import './velin-sparkline.js';
+import './velin-counter.js';
+import './velin-live-dot.js';
+import './velin-reveal.js';
+import './velin-flip.js';
+import './velin-email.js';

package/components/runtime/component-loaders.js

@@ -0,0 +1,43 @@
+/**
+ * AUTO-GENERATED — run: node scripts/generate-component-loaders.mjs
+ */
+export const COMPONENT_LOADERS = {
+  'velin-accordion': () => import('../velin-accordion.js'),
+  'velin-announcer': () => import('../velin-announcer.js'),
+  'velin-bottom-nav': () => import('../velin-bottom-nav.js'),
+  'velin-carousel': () => import('../velin-carousel.js'),
+  'velin-code-block': () => import('../velin-code-block.js'),
+  'velin-collapse': () => import('../velin-collapse.js'),
+  'velin-combobox': () => import('../velin-combobox.js'),
+  'velin-command': () => import('../velin-command.js'),
+  'velin-copy': () => import('../velin-copy.js'),
+  'velin-countdown': () => import('../velin-countdown.js'),
+  'velin-counter': () => import('../velin-counter.js'),
+  'velin-dialog': () => import('../velin-dialog.js'),
+  'velin-drawer': () => import('../velin-drawer.js'),
+  'velin-dropdown': () => import('../velin-dropdown.js'),
+  'velin-email': () => import('../velin-email.js'),
+  'velin-icon': () => import('../velin-icon.js'),
+  'velin-lightbox': () => import('../velin-lightbox.js'),
+  'velin-live-dot': () => import('../velin-live-dot.js'),
+  'velin-menubar': () => import('../velin-menubar.js'),
+  'velin-modal': () => import('../velin-modal.js'),
+  'velin-persist': () => import('../velin-persist.js'),
+  'velin-popover': () => import('../velin-popover.js'),
+  'velin-progress-ring': () => import('../velin-progress-ring.js'),
+  'velin-rating': () => import('../velin-rating.js'),
+  'velin-scroll-top': () => import('../velin-scroll-top.js'),
+  'velin-scrollspy': () => import('../velin-scrollspy.js'),
+  'velin-search': () => import('../velin-search.js'),
+  'velin-secure-field': () => import('../velin-secure-field.js'),
+  'velin-segmented-control': () => import('../velin-segmented-control.js'),
+  'velin-sheet': () => import('../velin-sheet.js'),
+  'velin-sparkline': () => import('../velin-sparkline.js'),
+  'velin-stepper': () => import('../velin-stepper.js'),
+  'velin-stepper-wc': () => import('../velin-stepper.js'),
+  'velin-tabs': () => import('../velin-tabs.js'),
+  'velin-theme-toggle': () => import('../velin-theme-toggle.js'),
+  'velin-toast': () => import('../velin-toast.js'),
+  'velin-tooltip': () => import('../velin-tooltip.js'),
+  'velin-tooltip-wc': () => import('../velin-tooltip.js'),
+};

package/components/runtime/index.js

@@ -0,0 +1,77 @@
+/**
+ * VelinStyle runtime — register only the Web Components you need.
+ */
+import { COMPONENT_LOADERS } from './component-loaders.js';
+
+const registry = new Map();
+
+const VELIN_TAG_RE = /^velin-[a-z0-9-]+$/;
+
+export function whenDefined(tagName) {
+  if (typeof customElements === 'undefined') {
+    return Promise.reject(new Error('customElements not available'));
+  }
+  return customElements.whenDefined(tagName);
+}
+
+export async function lazyDefine(tagName) {
+  const loader = COMPONENT_LOADERS[tagName];
+  if (!loader) {
+    throw new Error(`Unknown Velin component: ${tagName}`);
+  }
+  if (registry.has(tagName)) return registry.get(tagName);
+  const p = loader().then((mod) => {
+    const Cls = mod.default;
+    if (Cls && !customElements.get(tagName)) {
+      customElements.define(tagName, Cls);
+    }
+    return Cls;
+  });
+  registry.set(tagName, p);
+  return p;
+}
+
+export async function register(tagNames) {
+  return Promise.all(tagNames.map((t) => lazyDefine(t)));
+}
+
+function collectTagsFromDOM(root) {
+  const tags = new Set();
+  root.querySelectorAll('[data-velin-component]').forEach((el) => {
+    const name = el.getAttribute('data-velin-component');
+    if (name) tags.add(name.startsWith('velin-') ? name : `velin-${name}`);
+  });
+  for (const el of root.querySelectorAll('*')) {
+    const tag = el.tagName?.toLowerCase();
+    if (tag && VELIN_TAG_RE.test(tag) && COMPONENT_LOADERS[tag]) {
+      tags.add(tag);
+    }
+  }
+  return tags;
+}
+
+/**
+ * @param {ParentNode} [root]
+ * @param {{ attributes?: boolean, highlight?: boolean, haptic?: boolean, tags?: string[] }} [options]
+ */
+export async function bootFromDOM(root = document, options = {}) {
+  const tags = options.tags?.length
+    ? new Set(options.tags)
+    : collectTagsFromDOM(root);
+  const wcPromise = register([...tags]);
+  if (options.attributes) {
+    const { bootAttributes } = await import('../../core/attributes/index.js');
+    await bootAttributes(root);
+  }
+  if (options.highlight) {
+    const { initHighlight } = await import('../../core/highlight/index.js');
+    initHighlight(root);
+  }
+  if (options.haptic) {
+    const { VelinHapticObserver } = await import('../velin-haptic.js');
+    new VelinHapticObserver().start(root instanceof Document ? root.body : root);
+  }
+  return wcPromise;
+}
+
+export { COMPONENT_LOADERS };

package/components/runtime-entry.js

@@ -0,0 +1,10 @@
+/**
+ * Tree-shakeable entry — no side-effect component registrations.
+ */
+export {
+  register,
+  lazyDefine,
+  whenDefined,
+  bootFromDOM,
+  COMPONENT_LOADERS,
+} from './runtime/index.js';

package/components/sanitize.js

@@ -1,28 +1,135 @@
-const ESCAPE_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-const ESCAPE_RE = /[&<>"']/g;
-
-export function escapeHTML(str) {
-  if (typeof str !== 'string') return '';
-  return str.replace(ESCAPE_RE, (ch) => ESCAPE_MAP[ch]);
-}
-
-export function sanitizeURL(url) {
-  if (typeof url !== 'string') return '';
-  try {
-    const parsed = new URL(url, location.href);
-    if (['http:', 'https:', 'data:'].includes(parsed.protocol)) return url;
-    return '';
-  } catch { return ''; }
-}
-
-let _policy = null;
-
-export function getTrustedPolicy() {
-  if (_policy) return _policy;
-  if (typeof window !== 'undefined' && window.trustedTypes?.createPolicy) {
-    _policy = window.trustedTypes.createPolicy('velinstyle', {
-      createHTML: (input) => escapeHTML(input),
-    });
-  }
-  return _policy;
-}
+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|image\/svg\+xml|application\/xml)/i;
+const ALLOWED_DATA_IMAGE = /^data:image\/(png|jpeg|jpg|gif|webp|avif);base64,/i;
+
+const SECURE_INPUT_TYPES = new Set(['text', 'password', 'email', 'search', 'tel', 'url', 'number']);
+
+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));
+}
+
+/**
+ * @param {string} url
+ * @param {string} [base]
+ */
+export function sanitizeURL(url, base) {
+  if (typeof url !== 'string') return '';
+  const trimmed = url.trim();
+  if (!trimmed) return '';
+  if (/^\s*javascript:/i.test(trimmed) || /^\s*vbscript:/i.test(trimmed)) return '';
+  if (BLOCKED_DATA_MIME.test(trimmed)) return '';
+  if (/^data:/i.test(trimmed) && !ALLOWED_DATA_IMAGE.test(trimmed)) return '';
+  try {
+    const parsed = new URL(trimmed, base || (typeof location !== 'undefined' ? location.href : 'https://example.invalid/'));
+    if (!ALLOWED_URL_PROTOCOLS.has(parsed.protocol)) return '';
+    if (parsed.protocol === 'data:' && !ALLOWED_DATA_IMAGE.test(parsed.href)) return '';
+    return parsed.href;
+  } catch {
+    if (trimmed.startsWith('#') || trimmed.startsWith('/')) return trimmed;
+    return '';
+  }
+}
+
+/**
+ * @param {string} url
+ * @param {string} [base]
+ */
+export function sanitizeSearchUrl(url, base) {
+  if (typeof url !== 'string') return '#';
+  const trimmed = url.trim();
+  if (!trimmed) return '#';
+  if (trimmed.startsWith('#')) return trimmed;
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//')) return trimmed;
+  // Index paths like getting-started/foo.html — must stay relative (resolved at navigation).
+  if (!/^https?:\/\//i.test(trimmed)) {
+    if (/^\s*javascript:/i.test(trimmed) || /^\s*vbscript:/i.test(trimmed)) return '#';
+    return trimmed;
+  }
+  const safe = sanitizeURL(trimmed, base);
+  return safe || '#';
+}
+
+export function sanitizeInputType(type) {
+  const t = String(type || 'text').toLowerCase();
+  return SECURE_INPUT_TYPES.has(t) ? t : 'text';
+}
+
+let _purify = null;
+
+async function loadPurify() {
+  if (_purify) return _purify;
+  try {
+    const mod = await import('isomorphic-dompurify');
+    _purify = mod.default || mod;
+  } catch {
+    _purify = null;
+  }
+  return _purify;
+}
+
+const SVG_ALLOWED_TAGS = ['svg', 'g', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse', 'defs', 'use', 'symbol', 'title', 'desc', 'clipPath', 'mask', 'linearGradient', 'radialGradient', 'stop', 'pattern', 'text', 'tspan'];
+const SVG_ALLOWED_ATTR = ['viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height', 'x1', 'y1', 'x2', 'y2', 'points', 'transform', 'opacity', 'class', 'id', 'href', 'xlink:href', 'aria-hidden', 'aria-label', 'aria-labelledby', 'role', 'focusable', 'clip-path', 'mask', 'offset', 'stop-color', 'stop-opacity', 'gradientUnits', 'gradientTransform', 'spreadMethod', 'fx', 'fy', 'patternUnits', 'patternContentUnits', 'preserveAspectRatio'];
+
+/**
+ * @param {string} svgMarkup
+ */
+export async function sanitizeSVG(svgMarkup) {
+  if (typeof svgMarkup !== 'string') return '';
+  const DOMPurify = await loadPurify();
+  if (DOMPurify?.sanitize) {
+    return DOMPurify.sanitize(svgMarkup, {
+      USE_PROFILES: { svg: true, svgFilters: true },
+      ADD_TAGS: SVG_ALLOWED_TAGS,
+      ADD_ATTR: SVG_ALLOWED_ATTR,
+      FORBID_TAGS: ['script', 'foreignObject', 'iframe', 'object', 'embed'],
+      FORBID_ATTR: ['onload', 'onerror', 'onclick', 'onmouseover'],
+    });
+  }
+  return svgMarkup
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/\s+on\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/<foreignObject[\s\S]*?<\/foreignObject>/gi, '');
+}
+
+/**
+ * @param {string} html
+ */
+export async function sanitizeHTML(html) {
+  if (typeof html !== 'string') return '';
+  const DOMPurify = await loadPurify();
+  if (DOMPurify?.sanitize) return DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+  return escapeHTML(html);
+}
+
+let _policy = null;
+
+export function getTrustedPolicy() {
+  if (_policy) return _policy;
+  if (typeof window !== 'undefined' && window.trustedTypes?.createPolicy) {
+    _policy = window.trustedTypes.createPolicy('velinstyle', {
+      createHTML: (input) => escapeHTML(input),
+    });
+  }
+  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-accordion.js

@@ -26,6 +26,18 @@ const styles = `
   ::slotted(details > summary::-webkit-details-marker) {
     display: none;
   }
+  ::slotted(details[open] > summary) {
+    background: var(--velin-color-primary-subtle, #eff6ff);
+    color: var(--velin-color-primary, #2563eb);
+  }
+  ::slotted(details > :not(summary)) {
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    background: var(--velin-color-bg-subtle, #f8fafc);
+    color: var(--velin-color-text-muted, #64748b);
+    font-size: var(--velin-text-sm, 0.875rem);
+    line-height: 1.6;
+    border-block-start: 1px solid var(--velin-color-border, #e2e8f0);
+  }
 `;
 
 class VelinAccordion extends HTMLElement {

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,108 @@
+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();
+    this._syncSlotLabels();
+  }
+
+  _syncSlotLabels() {
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (!slot) return;
+    slot.assignedElements().forEach((el) => {
+      const text = el.textContent?.replace(/\s+/g, ' ').trim();
+      if (!text && !el.getAttribute('aria-label')) {
+        const hint =
+          el.getAttribute('data-nav') ||
+          el.getAttribute('title') ||
+          el.getAttribute('aria-labelledby');
+        if (hint) el.setAttribute('aria-label', hint);
+      }
+      if (el.tagName === 'A' && !el.getAttribute('href')) {
+        el.setAttribute('role', 'button');
+      }
+    });
+  }
+
+  _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-carousel.js

@@ -69,10 +69,10 @@ class VelinCarousel extends HTMLElement {
       <div class="track" role="group" aria-roledescription="carousel" part="track"><slot></slot></div>
       <div class="controls" part="controls">
         <button class="prev" aria-label="Previous slide" part="prev">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="15 18 9 12 15 6"/></svg>
         </button>
         <button class="next" aria-label="Next slide" part="next">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="9 6 15 12 9 18"/></svg>
         </button>
       </div>
       <div class="indicators" role="group" aria-label="Slide indicators" part="indicators"></div>