@birdapi/velinstyle 0.7.0 → 0.9.0

package/components/velin-code-block.js

@@ -0,0 +1,142 @@
+import { highlightElement, initHighlight } from '../core/highlight/index.js';
+
+/**
+ * @param {string} spec
+ * @returns {Set<number>}
+ */
+function parseLineHighlight(spec) {
+  const lines = new Set();
+  if (!spec) return lines;
+  for (const part of spec.split(',')) {
+    const p = part.trim();
+    if (!p) continue;
+    if (p.includes('-')) {
+      const [a, b] = p.split('-').map((n) => parseInt(n, 10));
+      if (!Number.isNaN(a) && !Number.isNaN(b)) {
+        for (let i = Math.min(a, b); i <= Math.max(a, b); i += 1) lines.add(i);
+      }
+    } else {
+      const n = parseInt(p, 10);
+      if (!Number.isNaN(n)) lines.add(n);
+    }
+  }
+  return lines;
+}
+
+class VelinCodeBlock extends HTMLElement {
+  static get observedAttributes() {
+    return ['language', 'highlight', 'line-numbers', 'collapsed'];
+  }
+
+  connectedCallback() {
+    if (this._built) return;
+    this._built = true;
+    this.classList.add('velin-code-block');
+    this._render();
+    this._setupHighlight();
+  }
+
+  attributeChangedCallback() {
+    if (!this._built) return;
+    this._render();
+    this._setupHighlight();
+  }
+
+  _render() {
+    const lang = this.getAttribute('language') || '';
+    const showLines = this.hasAttribute('line-numbers');
+    const collapsed = this.hasAttribute('collapsed');
+    const highlightLines = parseLineHighlight(this.getAttribute('highlight') || '');
+
+    const source = this.textContent.trim();
+    this.textContent = '';
+
+    const toolbar = document.createElement('div');
+    toolbar.className = 'velin-code-block__toolbar';
+    toolbar.innerHTML = '';
+
+    const copyWc = document.createElement('velin-copy');
+    copyWc.setAttribute('value', source);
+    copyWc.setAttribute('label', 'Copy');
+    toolbar.appendChild(copyWc);
+
+    const panelId = `velin-code-panel-${Math.random().toString(36).slice(2, 9)}`;
+    const wrap = document.createElement('div');
+    wrap.id = panelId;
+    wrap.className = showLines ? 'velin-code-block__gutter' : '';
+
+    if (collapsed) {
+      const toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.className = 'velin-btn velin-btn--sm velin-btn--ghost';
+      toggle.textContent = 'Expand';
+      toggle.setAttribute('aria-expanded', 'false');
+      toggle.setAttribute('aria-controls', panelId);
+      toggle.setAttribute('aria-label', 'Expand code block');
+      toggle.addEventListener('click', () => {
+        const on = this.hasAttribute('data-collapsed');
+        if (on) {
+          this.removeAttribute('data-collapsed');
+          toggle.textContent = 'Collapse';
+          toggle.setAttribute('aria-expanded', 'true');
+          toggle.setAttribute('aria-label', 'Collapse code block');
+        } else {
+          this.setAttribute('data-collapsed', '');
+          toggle.textContent = 'Expand';
+          toggle.setAttribute('aria-expanded', 'false');
+          toggle.setAttribute('aria-label', 'Expand code block');
+        }
+      });
+      this.setAttribute('data-collapsed', '');
+      toolbar.appendChild(toggle);
+    }
+
+    if (showLines) {
+      const gutter = document.createElement('div');
+      gutter.className = 'velin-code-block__line-numbers';
+      const lines = source.split('\n');
+      const lineCount = lines.length;
+      gutter.textContent = '';
+      for (let i = 0; i < lineCount; i += 1) {
+        const n = i + 1;
+        const span = document.createElement('span');
+        if (highlightLines.has(n)) span.className = 'velin-code-block__line--highlight';
+        span.textContent = String(n);
+        gutter.appendChild(span);
+      }
+      wrap.appendChild(gutter);
+    }
+
+    const pre = document.createElement('pre');
+    if (lang) {
+      pre.setAttribute('language', lang);
+      pre.dataset.language = lang;
+    }
+    const code = document.createElement('code');
+    if (lang) code.className = `language-${lang}`;
+    code.textContent = source;
+    pre.appendChild(code);
+    wrap.appendChild(pre);
+
+    this.appendChild(toolbar);
+    this.appendChild(wrap);
+    this._pre = pre;
+  }
+
+  async _setupHighlight() {
+    if (!this._pre) return;
+    delete this._pre.dataset.velinHighlighted;
+    delete this._pre.dataset.velinObserve;
+    const immediate =
+      typeof matchMedia !== 'undefined' &&
+      matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (immediate) {
+      await highlightElement(this._pre);
+    } else {
+      initHighlight(this, { root: this });
+    }
+  }
+}
+
+customElements.define('velin-code-block', VelinCodeBlock);
+export default VelinCodeBlock;

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,142 @@
+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;
+    });
+  }
+
+  _visibleItems() {
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot?.assignedElements().filter((el) => el.tagName === 'BUTTON' && !el.hidden) || [];
+  }
+
+  _onKey(e) {
+    if (e.key === 'Escape') { this.close(); return; }
+    const items = this._visibleItems();
+    if (items.length && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+      e.preventDefault();
+      const idx = items.indexOf(document.activeElement);
+      const next = e.key === 'ArrowDown'
+        ? items[(idx + 1) % items.length]
+        : items[(idx <= 0 ? items.length : idx) - 1];
+      next?.focus();
+      return;
+    }
+    trapFocus(this.shadowRoot, e);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-command', VelinCommand);
+export default VelinCommand;

package/components/velin-copy.js

@@ -1,3 +1,5 @@
+import { escapeHTML } from './sanitize.js';
+
 const styles = `
   :host { display: inline-flex; }
   button {
@@ -27,14 +29,14 @@ class VelinCopy extends HTMLElement {
   }
 
   connectedCallback() {
-    const label = this.getAttribute('label') || '';
+    const label = escapeHTML(this.getAttribute('label') || '');
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <button part="button" aria-label="Copy">
-        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
         </svg>
-        <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <polyline points="20 6 9 17 4 12"/>
         </svg>
         ${label ? `<span>${label}</span>` : ''}
@@ -44,8 +46,17 @@ class VelinCopy extends HTMLElement {
     this.shadowRoot.querySelector('button').addEventListener('click', () => this._copy());
   }
 
+  _getCopyText() {
+    return (
+      this.getAttribute('value') ||
+      this.getAttribute('text') ||
+      this.dataset.source ||
+      ''
+    );
+  }
+
   async _copy() {
-    const value = this.getAttribute('value') || '';
+    const value = this._getCopyText();
     if (!value) return;
 
     try {
@@ -72,5 +83,7 @@ class VelinCopy extends HTMLElement {
   }
 }
 
-customElements.define('velin-copy', VelinCopy);
+if (!customElements.get('velin-copy')) {
+  customElements.define('velin-copy', VelinCopy);
+}
 export default VelinCopy;

package/components/velin-counter.js

@@ -0,0 +1,155 @@
+/*
+ * <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.setAttribute('role', 'status');
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-atomic', 'true');
+    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;

package/components/velin-dialog.js

@@ -69,6 +69,10 @@ class VelinDialog extends HTMLElement {
 
   connectedCallback() {
     this.shadowRoot.innerHTML = `<style>${styles}</style><dialog part="dialog"></dialog>`;
+    const dialog = this.shadowRoot.querySelector('dialog');
+    if (dialog) {
+      dialog.setAttribute('aria-label', this.getAttribute('aria-label') || 'Dialog');
+    }
   }
 
   alert(message, { title = 'Alert', confirmText = 'OK' } = {}) {
@@ -102,11 +106,15 @@ class VelinDialog extends HTMLElement {
       ? `<input class="input" placeholder="${safePlaceholder}" value="${safeDefault}" part="input">`
       : '';
 
+    const titleId = `velin-dialog-title-${Math.random().toString(36).slice(2, 9)}`;
     dialog.innerHTML = `
-      <div class="header"><h3 class="title">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
+      <div class="header"><h3 class="title" id="${titleId}">${safeTitle}</h3><button class="close" aria-label="Close">&times;</button></div>
       <div class="body"><p>${safeMsg}</p>${input}</div>
       <div class="footer">${footerBtns}</div>
     `;
+    dialog.setAttribute('aria-modal', 'true');
+    dialog.removeAttribute('aria-label');
+    dialog.setAttribute('aria-labelledby', titleId);
 
     dialog.showModal();
     if (type !== 'prompt') {