@birdapi/velinstyle 1.2.1 → 1.3.0

package/cli/skills.js

@@ -28,7 +28,11 @@ export function loadSkillRegistry() {
   return loadRegistry(REGISTRY_PATH);
 }
 
-export function skillsList(argv = []) {
+/**
+ * @param {string[]} argv
+ * @param {{ silent?: boolean }} [opts]
+ */
+export function skillsList(argv = [], opts = {}) {
   const registry = loadSkillRegistry();
   const items = listSkills(registry, {
     capability: argValue(argv, '--capability') || undefined,
@@ -37,14 +41,16 @@ export function skillsList(argv = []) {
     origin: argValue(argv, '--origin') || undefined,
     category: argValue(argv, '--category') || undefined,
   });
+  if (opts.silent) return items;
   if (hasFlag(argv, '--json')) {
     console.log(JSON.stringify(items, null, 2));
-    return;
+    return items;
   }
   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)`);
+  return items;
 }
 
 export function skillsShow(skillId, argv = []) {
@@ -56,9 +62,10 @@ export function skillsShow(skillId, argv = []) {
   }
   if (hasFlag(argv, '--human')) {
     console.log(formatSkillHuman(skill));
-    return;
+    return skill;
   }
   console.log(JSON.stringify(skill, null, 2));
+  return skill;
 }
 
 function formatSkillHuman(skill) {
@@ -103,9 +110,14 @@ function formatSkillHuman(skill) {
   return lines.filter(Boolean).join('\n');
 }
 
-export function skillsInstall(argv = []) {
+/**
+ * @param {string[]} argv
+ * @param {{ silent?: boolean }} [opts]
+ */
+export function skillsInstall(argv = [], opts = {}) {
   const selection = argv[0];
   if (!selection) {
+    if (opts.silent) return null;
     console.error('Usage: velinstyle skills install <skill-id|pack|bundle:id|project:id>');
     process.exit(1);
   }
@@ -118,18 +130,30 @@ export function skillsInstall(argv = []) {
     targetRoot: target,
     includeDependencies: !hasFlag(argv, '--no-deps'),
   });
+  if (opts.silent) {
+    const markerPath = join(target, 'registry-source.json');
+    writeFileSync(markerPath, JSON.stringify({ source: REGISTRY_PATH, installed: result.installed }, null, 2), 'utf-8');
+    return result;
+  }
   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');
+  return result;
 }
 
-export function skillsRun(skillId, argv = []) {
+/**
+ * @param {string} skillId
+ * @param {string[]} argv
+ * @param {{ silent?: boolean }} [opts]
+ */
+export function skillsRun(skillId, argv = [], opts = {}) {
   const registry = loadSkillRegistry();
   const resolved = resolveSkillGraph(registry, skillId);
   if (resolved.issues.length) {
+    if (opts.silent) return { ok: false, issues: resolved.issues, steps: [] };
     for (const issue of resolved.issues) console.error(issue);
     process.exit(1);
   }
@@ -139,20 +163,27 @@ export function skillsRun(skillId, argv = []) {
     if (!skill) continue;
     steps.push({ id: skill.id, requiresCli: skill.requiresCli || [], onlyIf: skill.onlyIf || [] });
   }
+  const payload = { steps };
+  if (opts.silent) return payload;
   if (hasFlag(argv, '--json')) {
-    console.log(JSON.stringify({ steps }, null, 2));
-    return;
+    console.log(JSON.stringify(payload, null, 2));
+    return payload;
   }
   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(', ')}`);
   }
+  return payload;
 }
 
-export function skillsValidate() {
+/**
+ * @param {{ silent?: boolean }} [opts]
+ */
+export function skillsValidate(opts = {}) {
   const registry = loadSkillRegistry();
   const result = validateRegistry(registry);
+  if (opts.silent) return result;
   if (result.errors.length) {
     for (const error of result.errors) console.error(`Error: ${error}`);
   }
@@ -163,9 +194,14 @@ export function skillsValidate() {
   process.exit(result.ok ? 0 : 1);
 }
 
-export async function skillsDoctor(argv = []) {
+/**
+ * @param {string[]} argv
+ * @param {{ silent?: boolean }} [opts]
+ */
+export async function skillsDoctor(argv = [], opts = {}) {
   const { doctorSkillPaths } = await import('../scripts/check-skills-paths.mjs');
   const result = doctorSkillPaths(PKG_ROOT);
+  if (opts.silent) return result;
   if (hasFlag(argv, '--json')) {
     console.log(JSON.stringify(result, null, 2));
     process.exit(result.ok ? 0 : 1);
@@ -176,9 +212,14 @@ export async function skillsDoctor(argv = []) {
     process.exit(1);
   }
   console.log(`skills doctor OK (${result.checked} paths).`);
+  return result;
 }
 
-export function skillsIndex(kind) {
+/**
+ * @param {string} kind
+ * @param {{ silent?: boolean }} [opts]
+ */
+export function skillsIndex(kind, opts = {}) {
   const registry = loadSkillRegistry();
   const map = {
     packs: registry.packs || [],
@@ -188,7 +229,9 @@ export function skillsIndex(kind) {
     graphs: registry.workflowGraphs || [],
   };
   const out = map[kind] || [];
+  if (opts.silent) return out;
   console.log(JSON.stringify(out, null, 2));
+  return out;
 }
 
 export function skillsCommand(argv = []) {

package/cli/transparency.js

@@ -44,10 +44,10 @@ function printScores(scores, C) {
 
 /**
  * @param {string[]} args process.argv slice after "transparency"
- * @param {{ C: object, getArg: Function, hasFlag: Function }} util
+ * @param {{ C: object, getArg: Function, hasFlag: Function, emitExperience?: Function }} util
  */
 export async function transparencyCmd(args, util) {
-  const { C, getArg, hasFlag } = util;
+  const { C, getArg, hasFlag, emitExperience } = util;
   const sub = args[0] || 'doctor';
   const rest = args.slice(1);
   const target = rest.find((a) => !a.startsWith('-')) || '.';
@@ -55,32 +55,55 @@ export async function transparencyCmd(args, util) {
   const policy = loadPolicy(policyPath);
   const asJson = hasFlag('--json');
   const engine = createTransparencyEngine({ policy });
+  const present = emitExperience
+    ? async (payload) => emitExperience('transparency', payload)
+    : null;
 
-  if (sub === 'scan') {
-    return runDoctor(target, engine, { asJson, C });
-  }
-  if (sub === 'doctor') {
-    return runDoctor(target, engine, { asJson, C });
-  }
-  if (sub === 'validate') {
-    return runValidate(target, engine, { asJson, C });
-  }
-  if (sub === 'report') {
-    return runReport(target, engine, { C, getArg });
-  }
-  if (sub === 'export') {
-    return runExport(target, engine, { C, getArg });
-  }
-  if (sub === 'migrate') {
-    return runMigrate(target, engine, { C, hasFlag, getArg });
-  }
-  if (sub === 'suggest') {
-    return runMigrate(target, engine, { C, hasFlag, getArg, forceDry: true });
-  }
-  if (sub === 'apply') {
-    return runMigrate(target, engine, { C, hasFlag, getArg, forceApply: true });
+  try {
+    if (sub === 'scan') {
+      return await runDoctor(target, engine, { asJson, C, present });
+    }
+    if (sub === 'doctor') {
+      return await runDoctor(target, engine, { asJson, C, present });
+    }
+    if (sub === 'validate') {
+      return await runValidate(target, engine, { asJson, C, present });
+    }
+    if (sub === 'report') {
+      return await runReport(target, engine, { C, getArg, present });
+    }
+    if (sub === 'export') {
+      return await runExport(target, engine, { C, getArg, present });
+    }
+    if (sub === 'migrate') {
+      return await runMigrate(target, engine, { C, hasFlag, getArg, present });
+    }
+    if (sub === 'suggest') {
+      return await runMigrate(target, engine, { C, hasFlag, getArg, present, forceDry: true });
+    }
+    if (sub === 'apply') {
+      return await runMigrate(target, engine, { C, hasFlag, getArg, present, forceApply: true });
+    }
+  } catch (e) {
+    const message = /** @type {Error} */ (e).message || String(e);
+    if (present) {
+      await present({ status: 'ERROR', message, exitCode: 1 });
+      return;
+    }
+    console.log(C.red(message));
+    process.exitCode = 1;
+    return;
   }
 
+  if (present) {
+    await present({
+      status: 'ERROR',
+      message: `Unknown transparency subcommand: ${sub}`,
+      suggestions: [{ text: 'velinstyle transparency doctor|validate|report|export|migrate|scan [path]' }],
+      exitCode: 1,
+    });
+    return;
+  }
   console.log(`Unknown transparency subcommand: ${sub}
 Usage:
   velinstyle transparency doctor|validate|report|export|migrate|scan [path]
@@ -88,9 +111,13 @@ Usage:
   process.exitCode = 1;
 }
 
-async function runDoctor(target, engine, { asJson, C }) {
+async function runDoctor(target, engine, { asJson, C, present }) {
   const files = collectHtmlFiles(target);
   if (!files.length) {
+    if (present) {
+      await present({ status: 'WARNING', message: 'No HTML files found.', exitCode: 1 });
+      return;
+    }
     console.log(C.yellow('No HTML files found.'));
     process.exitCode = 1;
     return;
@@ -102,7 +129,7 @@ async function runDoctor(target, engine, { asJson, C }) {
     const report = await engine.doctor(html, { file });
     reports.push(report);
     if (!report.ok) failed += 1;
-    if (!asJson) {
+    if (!asJson && !present) {
       console.log(C.bold(`\n── ${basename(file)} ──`));
       console.log(report.ok ? C.green('PASS') : C.red('FAIL'));
       console.log(`disclosures=${report.summary.disclosures} errors=${report.summary.errors} warnings=${report.summary.warnings}`);
@@ -116,6 +143,30 @@ async function runDoctor(target, engine, { asJson, C }) {
   }
   if (asJson) {
     console.log(JSON.stringify(files.length === 1 ? reports[0] : { reports }, null, 2));
+  } else if (present) {
+    const findings = reports.flatMap((r) =>
+      (r.findings || []).slice(0, 10).map((f) => [
+        basename(r.file || '') || 'file',
+        f.severity,
+        f.code,
+        String(f.message || '').slice(0, 40),
+      ]),
+    );
+    const lastScores = reports[reports.length - 1]?.scores || {};
+    await present({
+      subtitle: 'doctor',
+      status: failed ? 'ERROR' : 'PASS',
+      message: failed ? `transparency doctor: ${failed} file(s) failed` : 'transparency doctor: ok',
+      items: [
+        { label: 'Files', value: String(files.length) },
+        { label: 'Failed', value: String(failed) },
+        ...Object.entries(lastScores).map(([k, v]) => ({ label: k, value: `${v}%` })),
+      ],
+      table: findings.length
+        ? { columns: ['File', 'Sev', 'Code', 'Message'], rows: findings.slice(0, 25) }
+        : null,
+      exitCode: failed ? 1 : undefined,
+    });
   } else {
     console.log(failed ? C.red(`\ntransparency doctor: ${failed} file(s) failed`) : C.green('\ntransparency doctor: ok'));
   }
@@ -123,7 +174,7 @@ async function runDoctor(target, engine, { asJson, C }) {
   return reports;
 }
 
-async function runValidate(target, engine, { asJson, C }) {
+async function runValidate(target, engine, { asJson, C, present }) {
   const files = collectHtmlFiles(target);
   const all = [];
   let failed = 0;
@@ -132,15 +183,28 @@ async function runValidate(target, engine, { asJson, C }) {
     const result = await engine.validate(html, { file });
     all.push({ file, ...result });
     if (!result.ok) failed += 1;
-    if (!asJson) {
+    if (!asJson && !present) {
       console.log(`${basename(file)}: ${result.ok ? C.green('valid') : C.red('invalid')} (${result.findings.length} findings)`);
     }
   }
-  if (asJson) console.log(JSON.stringify(all, null, 2));
+  if (asJson) {
+    console.log(JSON.stringify(all, null, 2));
+  } else if (present) {
+    await present({
+      subtitle: 'validate',
+      status: failed ? 'ERROR' : 'PASS',
+      message: failed ? `${failed} file(s) invalid` : 'All files valid',
+      table: {
+        columns: ['File', 'Status', 'Findings'],
+        rows: all.map((r) => [basename(r.file), r.ok ? 'valid' : 'invalid', String(r.findings?.length || 0)]),
+      },
+      exitCode: failed ? 1 : undefined,
+    });
+  }
   if (failed) process.exitCode = 1;
 }
 
-async function runReport(target, engine, { C, getArg }) {
+async function runReport(target, engine, { C, getArg, present }) {
   const outDir = resolve(getArg('--out') || 'transparency-report');
   mkdirSync(outDir, { recursive: true });
   const files = collectHtmlFiles(target);
@@ -155,10 +219,21 @@ async function runReport(target, engine, { C, getArg }) {
     combined.files.push({ file, scores: artifacts.json.scores, ok: artifacts.json.ok });
   }
   writeFileSync(join(outDir, 'index.json'), JSON.stringify(combined, null, 2));
-  console.log(C.green(`Wrote transparency reports to ${outDir}`));
+  if (present) {
+    await present({
+      subtitle: 'report',
+      message: `Wrote transparency reports to ${outDir}`,
+      items: [
+        { label: 'Files', value: String(files.length) },
+        { label: 'Out', value: outDir },
+      ],
+    });
+  } else {
+    console.log(C.green(`Wrote transparency reports to ${outDir}`));
+  }
 }
 
-async function runExport(target, engine, { C, getArg }) {
+async function runExport(target, engine, { C, getArg, present }) {
   const format = getArg('--format') || 'json';
   const out = getArg('--output') || getArg('-o');
   const files = collectHtmlFiles(target);
@@ -171,32 +246,56 @@ async function runExport(target, engine, { C, getArg }) {
   const body = fresh.export(format);
   if (out) {
     writeFileSync(resolve(out), body);
-    console.log(C.green(`Exported ${format} → ${out}`));
+    if (present) {
+      await present({
+        subtitle: 'export',
+        message: `Exported ${format} → ${out}`,
+        items: [{ label: 'Format', value: format }, { label: 'Out', value: out }],
+      });
+    } else {
+      console.log(C.green(`Exported ${format} → ${out}`));
+    }
   } else {
     console.log(body);
   }
 }
 
-async function runMigrate(target, engine, { C, hasFlag, getArg, forceDry, forceApply }) {
+async function runMigrate(target, engine, { C, hasFlag, getArg, present, forceDry, forceApply }) {
   const apply = forceApply || hasFlag('--apply') || hasFlag('--write');
   const dryRun = forceDry || (!apply);
   const files = collectHtmlFiles(target);
   let total = 0;
+  const rows = [];
   for (const file of files) {
     const html = readFileSync(file, 'utf-8');
     const result = await engine.migrate(html, { file, apply: apply && !dryRun, dryRun });
     total += result.suggestions.length;
-    console.log(C.bold(`\n── ${basename(file)} ──`));
-    console.log(`${result.suggestions.length} suggestion(s)${apply && !dryRun ? `, applied ${result.applied}` : ' (dry-run)'}`);
-    for (const s of result.suggestions.slice(0, 30)) {
-      console.log(C.dim(`  • ${s.id || s.field || s.kind}: ${s.reason}`));
+    if (!present) {
+      console.log(C.bold(`\n── ${basename(file)} ──`));
+      console.log(`${result.suggestions.length} suggestion(s)${apply && !dryRun ? `, applied ${result.applied}` : ' (dry-run)'}`);
+      for (const s of result.suggestions.slice(0, 30)) {
+        console.log(C.dim(`  • ${s.id || s.field || s.kind}: ${s.reason}`));
+      }
+    }
+    for (const s of result.suggestions.slice(0, 15)) {
+      rows.push([basename(file), s.id || s.field || s.kind || '—', String(s.reason || '').slice(0, 40)]);
     }
     if (apply && !dryRun && result.applied) {
       writeFileSync(file, result.html);
-      console.log(C.green(`  wrote ${file}`));
+      if (!present) console.log(C.green(`  wrote ${file}`));
     }
   }
-  if (!total) console.log(C.green('\nNo migration suggestions.'));
+  if (present) {
+    await present({
+      subtitle: apply && !dryRun ? 'apply' : 'migrate',
+      message: total
+        ? `${total} suggestion(s)${apply && !dryRun ? ' applied' : ' (dry-run)'}`
+        : 'No migration suggestions',
+      table: rows.length ? { columns: ['File', 'Id', 'Reason'], rows: rows.slice(0, 30) } : null,
+    });
+  } else if (!total) {
+    console.log(C.green('\nNo migration suggestions.'));
+  }
 }
 
 /**

package/cli/workflow.js

@@ -5,38 +5,53 @@ 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);
-  }
+/**
+ * Resolve a workflow graph or project workflow without printing.
+ * @param {string} workflowId
+ * @returns {{ ok: true, data: object } | { ok: false, error: string, issues?: string[] }}
+ */
+export function workflowResolve(workflowId) {
   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);
+      return { ok: false, error: `Unknown project: ${projectId}` };
     }
     resolved = resolveWorkflowGraph(registry, project.workflowGraph);
   } else {
     resolved = resolveWorkflowGraph(registry, workflowId);
   }
   if (resolved.issues.length) {
-    for (const issue of resolved.issues) console.error(issue);
+    return { ok: false, error: 'Workflow resolve failed', issues: resolved.issues };
+  }
+  return { ok: true, data: resolved };
+}
+
+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 resolved = workflowResolve(workflowId);
+  if (!resolved.ok) {
+    console.error(resolved.error);
+    if (resolved.issues) {
+      for (const issue of resolved.issues) console.error(issue);
+    }
     process.exit(1);
   }
   if (hasFlag(argv, '--json')) {
-    console.log(JSON.stringify(resolved, null, 2));
+    console.log(JSON.stringify(resolved.data, null, 2));
     return;
   }
-  console.log(`Workflow steps (${resolved.orderedSteps.length}):`);
-  for (const step of resolved.orderedSteps) console.log(`- ${step}`);
+  console.log(`Workflow steps (${resolved.data.orderedSteps.length}):`);
+  for (const step of resolved.data.orderedSteps) console.log(`- ${step}`);
 }

package/components/index.js

@@ -38,6 +38,9 @@ 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 { default as VelinOtpInput } from './velin-otp-input.js';
+export { default as VelinPasswordStrength, scorePassword } from './velin-password-strength.js';
+export { default as VelinEmptyState } from './velin-empty-state.js';
 export { bindDeclarativeSearch } from './velin-search.js';
 export { initReveal, initMotion, velinMotion } from './velin-reveal.js';
 export { initA11y, announce, getAnnouncer } from './a11y-entry.js';

package/components/runtime/component-loaders.js

@@ -19,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-empty-state': () => import('../velin-empty-state.js'),
   'velin-file-dropzone': () => import('../velin-file-dropzone.js'),
   'velin-form-summary': () => import('../velin-form-summary.js'),
   'velin-icon': () => import('../velin-icon.js'),
@@ -26,6 +27,8 @@ export const COMPONENT_LOADERS = {
   'velin-live-dot': () => import('../velin-live-dot.js'),
   'velin-menubar': () => import('../velin-menubar.js'),
   'velin-modal': () => import('../velin-modal.js'),
+  'velin-otp-input': () => import('../velin-otp-input.js'),
+  'velin-password-strength': () => import('../velin-password-strength.js'),
   'velin-persist': () => import('../velin-persist.js'),
   'velin-popover': () => import('../velin-popover.js'),
   'velin-progress-ring': () => import('../velin-progress-ring.js'),

package/components/velin-drawer.js

@@ -49,25 +49,28 @@ const styles = `
 `;
 
 class VelinDrawer extends HTMLElement {
-  static get observedAttributes() { return ['open']; }
+  static get observedAttributes() { return ['open', 'title']; }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open', delegatesFocus: true });
     this._prev = null;
     this._onKey = this._onKey.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
   }
 
   connectedCallback() {
-    const title = this.getAttribute('title') || '';
-    const safeTitle = escapeHTML(title);
+    if (this.shadowRoot.querySelector('.drawer')) return;
     const titleId = 'velin-drawer-title';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay"></div>
       <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
         <div class="header" part="header">
-          <h2 class="title" id="${titleId}">${safeTitle}</h2>
+          <h2 class="title" id="${titleId}" part="title">
+            <slot name="title"></slot>
+            <span class="title-fallback"></span>
+          </h2>
           <button class="close-btn" aria-label="Close" part="close">&#215;</button>
         </div>
         <div class="body" part="body"><slot></slot></div>
@@ -75,15 +78,51 @@ class VelinDrawer extends HTMLElement {
     `;
     this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
     this.shadowRoot.querySelector('.overlay').addEventListener('click', () => this.close());
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener('slotchange', this._onTitleSlot);
+    this._syncTitle();
   }
 
   attributeChangedCallback(name) {
     if (name === 'open') this.hasAttribute('open') ? this._open() : this._close();
+    if (name === 'title') this._syncTitle();
   }
 
   open() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true })); }
 
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!fallback) return;
+    fallback.textContent = this.getAttribute('title') || '';
+  }
+
+  _hasTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    if (!slot) return false;
+    return slot.assignedNodes({ flatten: true }).some((n) => {
+      if (n.nodeType === Node.TEXT_NODE) return Boolean(n.textContent.trim());
+      return n.nodeType === Node.ELEMENT_NODE;
+    });
+  }
+
+  _onTitleSlot() {
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!dialog || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      dialog.removeAttribute('aria-labelledby');
+      const slot = this.shadowRoot.querySelector('slot[name="title"]');
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || '').join(' ').trim();
+      if (label) dialog.setAttribute('aria-label', label);
+    } else {
+      fallback.hidden = false;
+      dialog.removeAttribute('aria-label');
+      dialog.setAttribute('aria-labelledby', 'velin-drawer-title');
+      this._syncTitle();
+    }
+  }
+
   _open() {
     this._prev = saveFocus();
     setBackgroundInert(this);