@birdapi/velinstyle 1.1.0 → 1.2.0

package/cli/serve.js

@@ -0,0 +1,81 @@
+/**
+ * Static file server for local previews.
+ */
+import { createServer } from 'http';
+import { readFileSync, existsSync, statSync } from 'fs';
+import { join, resolve, extname, normalize } from 'path';
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.woff2': 'font/woff2',
+  '.ico': 'image/x-icon',
+  '.map': 'application/json',
+};
+
+function safeJoin(root, reqPath) {
+  const decoded = decodeURIComponent((reqPath || '/').split('?')[0]);
+  const cleaned = normalize(decoded).replace(/^(\.\.[/\\])+/, '');
+  const full = resolve(root, '.' + (cleaned.startsWith('/') || cleaned.startsWith('\\') ? cleaned : `/${cleaned}`));
+  if (!full.startsWith(resolve(root))) return null;
+  return full;
+}
+
+/**
+ * @param {{ dir?: string, port?: number, host?: string }} opts
+ */
+export function serveStatic(opts = {}) {
+  const dir = resolve(opts.dir || '.');
+  const port = Number(opts.port) || 4173;
+  const host = opts.host || '127.0.0.1';
+
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) {
+    return { ok: false, error: `Not a directory: ${dir}` };
+  }
+
+  const server = createServer((req, res) => {
+    let filePath = safeJoin(dir, req.url || '/');
+    if (!filePath) {
+      res.writeHead(403);
+      res.end('Forbidden');
+      return;
+    }
+    if (existsSync(filePath) && statSync(filePath).isDirectory()) {
+      filePath = join(filePath, 'index.html');
+    }
+    if (!existsSync(filePath) || !statSync(filePath).isFile()) {
+      res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+      res.end('Not found');
+      return;
+    }
+    const type = MIME[extname(filePath).toLowerCase()] || 'application/octet-stream';
+    try {
+      const body = readFileSync(filePath);
+      res.writeHead(200, { 'Content-Type': type });
+      res.end(body);
+    } catch {
+      res.writeHead(500);
+      res.end('Read error');
+    }
+  });
+
+  return new Promise((resolvePromise) => {
+    server.listen(port, host, () => {
+      resolvePromise({
+        ok: true,
+        server,
+        url: `http://${host}:${port}/`,
+        dir,
+        close: () => new Promise((r) => server.close(() => r())),
+      });
+    });
+  });
+}

package/cli/skills.js

@@ -0,0 +1,223 @@
+import { resolve, join, dirname } from 'path';
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import {
+  loadRegistry,
+  listSkills,
+  findSkillById,
+  validateRegistry,
+  resolveSkillGraph,
+  installSelection,
+} from '../packages/skill-engine/src/index.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PKG_ROOT = join(__dirname, '..');
+const REGISTRY_PATH = join(PKG_ROOT, 'packages', 'velinstyle-skills', 'registry.json');
+const SKILLS_ROOT = join(PKG_ROOT, 'packages', 'velinstyle-skills');
+
+function argValue(argv, flag) {
+  const idx = argv.indexOf(flag);
+  return idx !== -1 ? argv[idx + 1] : null;
+}
+
+function hasFlag(argv, flag) {
+  return argv.includes(flag);
+}
+
+export function loadSkillRegistry() {
+  return loadRegistry(REGISTRY_PATH);
+}
+
+export function skillsList(argv = []) {
+  const registry = loadSkillRegistry();
+  const items = listSkills(registry, {
+    capability: argValue(argv, '--capability') || undefined,
+    status: argValue(argv, '--status') || undefined,
+    priority: argValue(argv, '--priority') || undefined,
+    origin: argValue(argv, '--origin') || undefined,
+    category: argValue(argv, '--category') || undefined,
+  });
+  if (hasFlag(argv, '--json')) {
+    console.log(JSON.stringify(items, null, 2));
+    return;
+  }
+  for (const item of items) {
+    console.log(`${item.id}  [${item.category}]  ${item.priority}/${item.status}  capabilities=${(item.capabilities || []).join(',')}`);
+  }
+  console.log(`\n${items.length} skill(s)`);
+}
+
+export function skillsShow(skillId, argv = []) {
+  const registry = loadSkillRegistry();
+  const skill = findSkillById(registry, skillId);
+  if (!skill) {
+    console.error(`Unknown skill: ${skillId}`);
+    process.exit(1);
+  }
+  if (hasFlag(argv, '--human')) {
+    console.log(formatSkillHuman(skill));
+    return;
+  }
+  console.log(JSON.stringify(skill, null, 2));
+}
+
+function formatSkillHuman(skill) {
+  const lines = [
+    `# ${skill.id}`,
+    '',
+    skill.title ? `**${skill.title}**` : '',
+    skill.summary || skill.description || '',
+    '',
+    `- Category: ${skill.category || '—'}`,
+    `- Status: ${skill.status || '—'}`,
+    `- Priority: ${skill.priority || '—'}`,
+    `- Capabilities: ${(skill.capabilities || []).join(', ') || '—'}`,
+  ];
+  if (skill.requiresCli?.length) lines.push(`- CLI: ${skill.requiresCli.join(', ')}`);
+  if (skill.inputs?.length) {
+    lines.push('', '## Inputs');
+    for (const input of skill.inputs) {
+      if (typeof input === 'string') {
+        lines.push(`- \`${input}\``);
+        continue;
+      }
+      const label = input.name || input.id || input.key || input.type || JSON.stringify(input);
+      lines.push(`- \`${label}\`${input.required ? ' (required)' : ''}: ${input.description || input.type || ''}`.trim());
+    }
+  }
+  if (skill.outputs?.length) {
+    lines.push('', '## Outputs');
+    for (const output of skill.outputs) {
+      if (typeof output === 'string') {
+        lines.push(`- \`${output}\``);
+        continue;
+      }
+      const label = output.name || output.id || output.key || output.type || JSON.stringify(output);
+      lines.push(`- \`${label}\`: ${output.description || output.type || ''}`.trim());
+    }
+  }
+  if (skill.dependsOn?.length) {
+    lines.push('', `## Depends on`, skill.dependsOn.map((d) => `- ${d}`).join('\n'));
+  }
+  lines.push('', '_Tip: blueprints must only emit classes present in CSS (`velinstyle blueprint --strict`)._');
+  return lines.filter(Boolean).join('\n');
+}
+
+export function skillsInstall(argv = []) {
+  const selection = argv[0];
+  if (!selection) {
+    console.error('Usage: velinstyle skills install <skill-id|pack|bundle:id|project:id>');
+    process.exit(1);
+  }
+  const target = resolve(argValue(argv, '--target') || '.cursor/skills');
+  mkdirSync(target, { recursive: true });
+  const registry = loadSkillRegistry();
+  const result = installSelection(registry, {
+    selection,
+    skillsRoot: SKILLS_ROOT,
+    targetRoot: target,
+    includeDependencies: !hasFlag(argv, '--no-deps'),
+  });
+  for (const installed of result.installed) console.log(`Installed ${installed}`);
+  if (result.issues.length) {
+    for (const issue of result.issues) console.warn(`Warning: ${issue}`);
+  }
+  const markerPath = join(target, 'registry-source.json');
+  writeFileSync(markerPath, JSON.stringify({ source: REGISTRY_PATH, installed: result.installed }, null, 2), 'utf-8');
+}
+
+export function skillsRun(skillId, argv = []) {
+  const registry = loadSkillRegistry();
+  const resolved = resolveSkillGraph(registry, skillId);
+  if (resolved.issues.length) {
+    for (const issue of resolved.issues) console.error(issue);
+    process.exit(1);
+  }
+  const steps = [];
+  for (const id of resolved.orderedSkillIds) {
+    const skill = findSkillById(registry, id);
+    if (!skill) continue;
+    steps.push({ id: skill.id, requiresCli: skill.requiresCli || [], onlyIf: skill.onlyIf || [] });
+  }
+  if (hasFlag(argv, '--json')) {
+    console.log(JSON.stringify({ steps }, null, 2));
+    return;
+  }
+  for (const step of steps) {
+    console.log(`- ${step.id}`);
+    if (step.requiresCli.length) console.log(`  cli: ${step.requiresCli.join(', ')}`);
+    if (step.onlyIf.length) console.log(`  onlyIf: ${step.onlyIf.join(', ')}`);
+  }
+}
+
+export function skillsValidate() {
+  const registry = loadSkillRegistry();
+  const result = validateRegistry(registry);
+  if (result.errors.length) {
+    for (const error of result.errors) console.error(`Error: ${error}`);
+  }
+  if (result.warnings.length) {
+    for (const warning of result.warnings) console.warn(`Warning: ${warning}`);
+  }
+  console.log(result.ok ? 'skills registry valid' : 'skills registry invalid');
+  process.exit(result.ok ? 0 : 1);
+}
+
+export async function skillsDoctor(argv = []) {
+  const { doctorSkillPaths } = await import('../scripts/check-skills-paths.mjs');
+  const result = doctorSkillPaths(PKG_ROOT);
+  if (hasFlag(argv, '--json')) {
+    console.log(JSON.stringify(result, null, 2));
+    process.exit(result.ok ? 0 : 1);
+  }
+  if (!result.ok) {
+    console.error(`skills doctor FAILED (${result.errors.length} missing path(s)):`);
+    for (const e of result.errors) console.error(`  - ${e}`);
+    process.exit(1);
+  }
+  console.log(`skills doctor OK (${result.checked} paths).`);
+}
+
+export function skillsIndex(kind) {
+  const registry = loadSkillRegistry();
+  const map = {
+    packs: registry.packs || [],
+    bundles: registry.bundles || [],
+    templates: registry.templates || [],
+    projects: registry.projects || [],
+    graphs: registry.workflowGraphs || [],
+  };
+  const out = map[kind] || [];
+  console.log(JSON.stringify(out, null, 2));
+}
+
+export function skillsCommand(argv = []) {
+  const sub = argv[0];
+  if (!sub || sub === '--help' || sub === '-h') {
+    console.log(`Usage: velinstyle skills <subcommand>
+
+Subcommands:
+  list [--category <id>] [--status <id>] [--json]
+  show <skill-id> [--human]
+  install <skill-id|pack:id|bundle:id|template:id>
+  run <skill-id> [--json]   (dry-run / inspect — not apply)
+  validate
+  doctor [--json]           Fail if demo/docs/starter paths missing
+  packs | bundles | templates | projects | graphs
+`);
+    process.exit(0);
+  }
+  if (sub === 'list') return skillsList(argv.slice(1));
+  if (sub === 'show') return skillsShow(argv[1], argv.slice(2));
+  if (sub === 'install') return skillsInstall(argv.slice(1));
+  if (sub === 'run') return skillsRun(argv[1], argv.slice(2));
+  if (sub === 'validate') return skillsValidate();
+  if (sub === 'doctor') return skillsDoctor(argv.slice(1));
+  if (sub === 'packs' || sub === 'bundles' || sub === 'templates' || sub === 'projects' || sub === 'graphs') return skillsIndex(sub);
+  console.error(`Unknown skills subcommand: ${sub}`);
+  process.exit(1);
+}
+
+export function getRegistryPathForMeta() {
+  return REGISTRY_PATH;
+}

package/cli/wc-api.js

@@ -0,0 +1,89 @@
+/**
+ * Human-readable WC API from source + generated docs tip.
+ */
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * @param {string} pkgRoot
+ * @param {string} tag
+ */
+export function describeWcApi(pkgRoot, tag) {
+  const name = String(tag || '').replace(/^</, '').replace(/>$/, '').trim();
+  if (!name.startsWith('velin-')) {
+    return { ok: false, error: `Expected a velin-* tag (got "${tag || ''}"). Example: velinstyle wc api velin-toast` };
+  }
+  const file = join(pkgRoot, 'components', `${name}.js`);
+  if (!existsSync(file)) {
+    return { ok: false, error: `No source at components/${name}.js` };
+  }
+  const src = readFileSync(file, 'utf-8');
+  const attrs = [...src.matchAll(/static\s+get\s+observedAttributes\(\)\s*\{\s*return\s*\[([^\]]*)\]/gs)]
+    .map((m) => m[1].split(',').map((s) => s.replace(/['"`\s]/g, '')).filter(Boolean))
+    .flat();
+  const methods = [...src.matchAll(/^\s{2}([a-zA-Z_][\w]*)\s*\([^)]*\)\s*\{/gm)]
+    .map((m) => m[1])
+    .filter((n) => !['constructor', 'connectedCallback', 'disconnectedCallback', 'attributeChangedCallback', 'adoptedCallback'].includes(n));
+  const showSig = src.match(/show\s*\(\s*\{([^}]*)\}\s*=\s*\{\s*\}\s*\)/);
+  const events = [...src.matchAll(/new\s+CustomEvent\(\s*['"]([^'"]+)['"]/g)].map((m) => m[1]);
+  const unique = (arr) => [...new Set(arr)];
+
+  const docPath = join(pkgRoot, 'docs/generated/components', `${name}.md`);
+  const hasDoc = existsSync(docPath);
+
+  let example = '';
+  if (name === 'velin-toast' && showSig) {
+    example = `<velin-toast></velin-toast>
+<script type="module">
+  const t = document.querySelector('velin-toast');
+  t.show({ message: 'Saved', type: 'success', duration: 4000 });
+</script>`;
+  } else if (name === 'velin-calendar') {
+    example = `<velin-calendar label="Pick a day" value="2026-07-30"></velin-calendar>`;
+  } else if (name === 'velin-file-dropzone') {
+    example = `<velin-file-dropzone label="Files" accept=".pdf,.png" multiple></velin-file-dropzone>`;
+  } else if (name === 'velin-data-table') {
+    example = `<velin-data-table label="Rows" page-size="5" filter-input="#q" editable>
+  <table>…</table>
+</velin-data-table>`;
+  }
+
+  return {
+    ok: true,
+    tag: name,
+    source: `components/${name}.js`,
+    observedAttributes: unique(attrs),
+    methods: unique(methods),
+    events: unique(events),
+    showSignature: showSig ? `show({ ${showSig[1].trim()} } = {})` : null,
+    generatedDoc: hasDoc ? `docs/generated/components/${name}.md` : null,
+    example: example || null,
+  };
+}
+
+export function formatWcApi(report) {
+  if (!report.ok) return report.error;
+  const lines = [
+    `# <${report.tag}>`,
+    '',
+    `Source: \`${report.source}\``,
+    report.generatedDoc ? `Generated docs: \`${report.generatedDoc}\`` : 'Generated docs: (missing — run `velinstyle docs generate`)',
+    '',
+    '## observedAttributes',
+    report.observedAttributes.length ? report.observedAttributes.map((a) => `- \`${a}\``).join('\n') : '_none_',
+    '',
+    '## Methods (from source)',
+    report.methods.length ? report.methods.map((m) => `- \`${m}()\``).join('\n') : '_none detected_',
+  ];
+  if (report.showSignature) {
+    lines.push('', '## Toast show()', `\`${report.showSignature}\``);
+  }
+  if (report.events.length) {
+    lines.push('', '## Custom events', report.events.map((e) => `- \`${e}\``).join('\n'));
+  }
+  if (report.example) {
+    lines.push('', '## Example', '```html', report.example, '```');
+  }
+  lines.push('', '_Tip: offline create projects include `vendor/velinstyle/docs/` mini copies of core WC markdown._');
+  return lines.join('\n');
+}

package/cli/workflow.js

@@ -0,0 +1,42 @@
+import { loadRegistry, resolveWorkflowGraph } from '../packages/skill-engine/src/index.js';
+import { getRegistryPathForMeta } from './skills.js';
+
+function hasFlag(argv, flag) {
+  return argv.includes(flag);
+}
+
+export function workflowCommand(argv = []) {
+  const workflowId = argv[0];
+  if (!workflowId || workflowId === '--help' || workflowId === '-h') {
+    console.log(`Usage: velinstyle workflow <graph-id|project:id> [--json]
+
+Examples:
+  velinstyle workflow landingpage
+  velinstyle workflow project:marketing-site --json
+`);
+    process.exit(0);
+  }
+  const registry = loadRegistry(getRegistryPathForMeta());
+  let resolved;
+  if (workflowId.startsWith('project:')) {
+    const projectId = workflowId.replace('project:', '');
+    const project = (registry.projects || []).find((item) => item.id === projectId);
+    if (!project) {
+      console.error(`Unknown project: ${projectId}`);
+      process.exit(1);
+    }
+    resolved = resolveWorkflowGraph(registry, project.workflowGraph);
+  } else {
+    resolved = resolveWorkflowGraph(registry, workflowId);
+  }
+  if (resolved.issues.length) {
+    for (const issue of resolved.issues) console.error(issue);
+    process.exit(1);
+  }
+  if (hasFlag(argv, '--json')) {
+    console.log(JSON.stringify(resolved, null, 2));
+    return;
+  }
+  console.log(`Workflow steps (${resolved.orderedSteps.length}):`);
+  for (const step of resolved.orderedSteps) console.log(`- ${step}`);
+}

package/components/index.js

@@ -35,6 +35,8 @@ export { default as VelinLiveDot } from './velin-live-dot.js';
 export { default as VelinCodeBlock } from './velin-code-block.js';
 export { default as VelinDataTable } from './velin-data-table.js';
 export { default as VelinFormSummary } from './velin-form-summary.js';
+export { default as VelinCalendar } from './velin-calendar.js';
+export { default as VelinFileDropzone } from './velin-file-dropzone.js';
 export { default as VelinSearch } from './velin-search.js';
 export { bindDeclarativeSearch } from './velin-search.js';
 export { initReveal, initMotion, velinMotion } from './velin-reveal.js';

package/components/runtime/component-loaders.js

@@ -5,6 +5,7 @@ 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-calendar': () => import('../velin-calendar.js'),
   'velin-carousel': () => import('../velin-carousel.js'),
   'velin-code-block': () => import('../velin-code-block.js'),
   'velin-collapse': () => import('../velin-collapse.js'),
@@ -18,6 +19,7 @@ export const COMPONENT_LOADERS = {
   'velin-drawer': () => import('../velin-drawer.js'),
   'velin-dropdown': () => import('../velin-dropdown.js'),
   'velin-email': () => import('../velin-email.js'),
+  'velin-file-dropzone': () => import('../velin-file-dropzone.js'),
   'velin-form-summary': () => import('../velin-form-summary.js'),
   'velin-icon': () => import('../velin-icon.js'),
   'velin-lightbox': () => import('../velin-lightbox.js'),

package/components/velin-accordion.js

@@ -1,20 +1,24 @@
-const styles = `
-  :host {
+const LIGHT_STYLE_ID = 'velin-accordion-light-css';
+
+/** Light-DOM styles: ::slotted() cannot target descendants of slotted <details>. */
+const lightStyles = `
+  velin-accordion {
     display: block;
     border: 1px solid var(--velin-color-border, #ddd);
     border-radius: var(--velin-radius-md, 0.5rem);
     overflow: hidden;
   }
-  ::slotted(details) {
+  velin-accordion details {
     border-bottom: 1px solid var(--velin-color-border, #ddd);
   }
-  ::slotted(details:last-child) {
+  velin-accordion details:last-child {
     border-bottom: none;
   }
-  ::slotted(details > summary) {
+  velin-accordion details > summary {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--velin-space-3, 0.75rem);
     padding: var(--velin-space-4, 1rem);
     min-block-size: 2.75rem;
     font-size: var(--velin-text-base, 1rem);
@@ -23,16 +27,29 @@ const styles = `
     user-select: none;
     list-style: none;
   }
-  ::slotted(details > summary::-webkit-details-marker) {
+  velin-accordion details > summary::-webkit-details-marker {
     display: none;
   }
-  ::slotted(details[open] > summary) {
+  velin-accordion details > summary::after {
+    content: "";
+    flex-shrink: 0;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: 2px solid currentColor;
+    border-block-end: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 150ms ease;
+  }
+  velin-accordion details[open] > summary {
     background: var(--velin-color-primary-subtle, #eff6ff);
     color: var(--velin-color-primary, #2563eb);
   }
-  ::slotted(details > :not(summary)) {
+  velin-accordion details[open] > summary::after {
+    transform: rotate(225deg);
+  }
+  velin-accordion details > :not(summary) {
     padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
-    background: var(--velin-color-bg-subtle, #f8fafc);
+    background: var(--velin-color-surface-dim, 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;
@@ -40,16 +57,33 @@ const styles = `
   }
 `;
 
+const shadowStyles = `
+  :host {
+    display: block;
+  }
+`;
+
+function ensureLightStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(LIGHT_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = LIGHT_STYLE_ID;
+  style.textContent = lightStyles;
+  document.head.appendChild(style);
+}
+
 class VelinAccordion extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
     this._onToggle = this._onToggle.bind(this);
+    this._onKeydown = this._onKeydown.bind(this);
   }
 
   connectedCallback() {
+    ensureLightStyles();
     this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
+      <style>${shadowStyles}</style>
       <slot></slot>
     `;
 
@@ -57,7 +91,7 @@ class VelinAccordion extends HTMLElement {
     this._wireDetails();
 
     this.addEventListener('toggle', this._onToggle, true);
-    this.addEventListener('keydown', this._onKeydown.bind(this));
+    this.addEventListener('keydown', this._onKeydown);
   }
 
   _wireDetails() {
@@ -69,14 +103,24 @@ class VelinAccordion extends HTMLElement {
       if (panel && !panel.id) panel.id = panelId;
       if (summary && panel) {
         summary.setAttribute('aria-controls', panelId);
+        summary.setAttribute('aria-expanded', details.open ? 'true' : 'false');
+      }
+      if (summary && !summary.hasAttribute('tabindex')) {
+        summary.setAttribute('tabindex', '0');
       }
     }
   }
 
   _onToggle(event) {
-    if (!this._exclusive) return;
     const openedDetail = event.target;
-    if (!openedDetail.open) return;
+    if (!(openedDetail instanceof HTMLDetailsElement)) return;
+
+    const summary = openedDetail.querySelector('summary');
+    if (summary) {
+      summary.setAttribute('aria-expanded', openedDetail.open ? 'true' : 'false');
+    }
+
+    if (!this._exclusive || !openedDetail.open) return;
 
     const details = [...this.querySelectorAll('details')];
     details.forEach((d) => {
@@ -109,6 +153,10 @@ class VelinAccordion extends HTMLElement {
         event.preventDefault();
         nextIndex = summaries.length - 1;
         break;
+      case 'Enter':
+      case ' ':
+        // Native summary already toggles on Enter/Space; don't double-handle.
+        return;
       default:
         return;
     }
@@ -117,6 +165,7 @@ class VelinAccordion extends HTMLElement {
 
   disconnectedCallback() {
     this.removeEventListener('toggle', this._onToggle, true);
+    this.removeEventListener('keydown', this._onKeydown);
   }
 }
 

package/components/velin-bottom-nav.js

@@ -69,6 +69,16 @@ class VelinBottomNav extends HTMLElement {
       }
       if (el.tagName === 'A' && !el.getAttribute('href')) {
         el.setAttribute('role', 'button');
+        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
+        if (!el._velinBottomNavKey) {
+          el._velinBottomNavKey = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              el.click();
+            }
+          };
+          el.addEventListener('keydown', el._velinBottomNavKey);
+        }
       }
     });
   }