@birdapi/velinstyle 0.6.1 → 0.8.0

package/cli/scanner.js

@@ -80,6 +80,51 @@ function scanSecurityHTML(content, file) {
         fix: (currentLine) => fixSafeExternalLinkLine(currentLine),
       });
     }
+
+    if (/<meta\s[^>]*http-equiv\s*=\s*["']refresh["']/i.test(line)) {
+      issues.push({
+        file, line: ln, severity: 0,
+        rule: 'security/no-meta-refresh',
+        message: '<meta http-equiv="refresh"> can redirect users without consent.',
+        fixable: false,
+      });
+    }
+
+    if (/\sstyle\s*=\s*["'][^"']+["']/i.test(line) && !/velin-user-content/i.test(line)) {
+      issues.push({
+        file, line: ln, severity: 1,
+        rule: 'security/no-inline-style',
+        message: 'Inline style attribute. Prefer CSS classes to reduce XSS surface.',
+        fixable: false,
+      });
+    }
+
+    if (/(?:href|src)\s*=\s*["']data:text\/html/i.test(line)) {
+      issues.push({
+        file, line: ln, severity: 0,
+        rule: 'security/no-data-html-uri',
+        message: 'data:text/html URI can execute script when mishandled.',
+        fixable: false,
+      });
+    }
+
+    if (/<form\b[^>]*\btarget\s*=\s*["']_blank["']/i.test(line)) {
+      issues.push({
+        file, line: ln, severity: 1,
+        rule: 'security/dangerous-target',
+        message: '<form target="_blank"> is unusual and can be abused. Prefer same-tab navigation.',
+        fixable: false,
+      });
+    }
+
+    if (/<script\b[^>]*\bsrc\s*=\s*["']https?:\/\//i.test(line) && !/\bintegrity\s*=/i.test(line)) {
+      issues.push({
+        file, line: ln, severity: 2,
+        rule: 'security/integrity-missing',
+        message: 'External <script> without integrity attribute. Use SRI for CDN scripts.',
+        fixable: false,
+      });
+    }
   });
 
   if (!/<meta\s[^>]*http-equiv\s*=\s*["']Content-Security-Policy["']/i.test(content)) {
@@ -136,11 +181,27 @@ function scanSecurityJS(content, file) {
         fixable: false,
       });
     }
+
+    if (/\.postMessage\s*\([^)]*,\s*['"]\*['"]\s*\)/.test(line)) {
+      issues.push({
+        file, line: ln, severity: 1,
+        rule: 'security/postmessage-wildcard',
+        message: 'postMessage with targetOrigin "*" accepts any origin.',
+        fixable: false,
+      });
+    }
   });
 
   return issues;
 }
 
+function issueCategory(rule) {
+  if (rule.startsWith('security/')) return 'security';
+  if (rule.startsWith('a11y/')) return 'a11y';
+  if (rule.startsWith('css/')) return 'css';
+  return 'other';
+}
+
 // ── Accessibility Scanner ────────────────────────────────────────────────────
 
 function scanA11yHTML(content, file) {
@@ -207,6 +268,52 @@ function scanA11yHTML(content, file) {
     });
   }
 
+  if (/<body/i.test(content) && !/<main\b/i.test(content) && !/id\s*=\s*["']main["']/i.test(content)) {
+    issues.push({
+      file, line: 1, severity: 1,
+      rule: 'a11y/landmark-main',
+      message: 'No <main> landmark or id="main" found. Add a main landmark for screen readers.',
+      fixable: false,
+    });
+  }
+
+  const headings = [...content.matchAll(/<h([1-6])\b/gi)].map((m) => parseInt(m[1], 10));
+  for (let i = 1; i < headings.length; i++) {
+    if (headings[i] - headings[i - 1] > 1) {
+      issues.push({
+        file, line: 1, severity: 1,
+        rule: 'a11y/heading-order',
+        message: `Heading level skips from h${headings[i - 1]} to h${headings[i]}. Use sequential heading levels.`,
+        fixable: false,
+      });
+      break;
+    }
+  }
+
+  lines.forEach((line, idx) => {
+    const ln = idx + 1;
+    if (/aria-hidden\s*=\s*["']true["']/i.test(line) && /<(button|a|input|select|textarea)\b/i.test(line)) {
+      issues.push({
+        file, line: ln, severity: 0,
+        rule: 'a11y/interactive-aria-hidden',
+        message: 'Interactive element with aria-hidden="true" is not exposed to assistive tech.',
+        fixable: false,
+      });
+    }
+
+    const iframeMatches = line.matchAll(/<iframe\b[^>]*>/gi);
+    for (const m of iframeMatches) {
+      if (!/\btitle\s*=/i.test(m[0])) {
+        issues.push({
+          file, line: ln, severity: 0,
+          rule: 'a11y/iframe-title',
+          message: '<iframe> without title attribute.',
+          fixable: false,
+        });
+      }
+    }
+  });
+
   return issues;
 }
 
@@ -279,6 +386,9 @@ export function scan(targetPath, options = {}) {
   const writeFixes = doFix && !fixDryRun;
   const runFixPipeline = doFix || fixDryRun;
   const ignore = options.ignore || DEFAULT_IGNORE;
+  const onlyCategories = options.only
+    ? options.only.split(',').map((s) => s.trim().toLowerCase())
+    : null;
 
   const htmlFiles = walkFiles(targetPath, ['.html', '.htm'], ignore);
   const cssFiles = walkFiles(targetPath, ['.css'], ignore);
@@ -303,6 +413,9 @@ export function scan(targetPath, options = {}) {
   }
 
   allIssues = allIssues.filter(i => i.severity <= minSeverity);
+  if (onlyCategories?.length) {
+    allIssues = allIssues.filter((i) => onlyCategories.includes(issueCategory(i.rule)));
+  }
   allIssues.sort((a, b) => a.severity - b.severity || a.file.localeCompare(b.file) || a.line - b.line);
 
   let fixSummary = null;
@@ -322,6 +435,7 @@ export function scan(targetPath, options = {}) {
       file: relative(targetPath, i.file),
       line: i.line,
       severity: SEVERITY_LABEL[i.severity],
+      category: issueCategory(i.rule),
       rule: i.rule,
       message: i.message,
       fixable: !!i.fixable,

package/components/focus-manager.js

@@ -1,80 +1,106 @@
-const FOCUSABLE_SELECTOR = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
-  '[tabindex]:not([tabindex="-1"])',
-  'summary',
-  'details',
-].join(', ');
-
-export function getFocusableElements(root) {
-  return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(
-    (el) => !el.hasAttribute('disabled') && el.offsetParent !== null
-  );
-}
-
-export function trapFocus(root, event) {
-  if (event.key !== 'Tab') return;
-
-  const focusable = getFocusableElements(root);
-  if (focusable.length === 0) return;
-
-  const first = focusable[0];
-  const last = focusable[focusable.length - 1];
-  const active = root.getRootNode().activeElement;
-
-  if (event.shiftKey && active === first) {
-    event.preventDefault();
-    last.focus();
-  } else if (!event.shiftKey && active === last) {
-    event.preventDefault();
-    first.focus();
-  }
-}
-
-export function rovingTabindex(container, items, event) {
-  const currentIndex = items.indexOf(event.target);
-  if (currentIndex === -1) return;
-
-  let nextIndex;
-
-  switch (event.key) {
-    case 'ArrowDown':
-    case 'ArrowRight':
-      event.preventDefault();
-      nextIndex = (currentIndex + 1) % items.length;
-      break;
-    case 'ArrowUp':
-    case 'ArrowLeft':
-      event.preventDefault();
-      nextIndex = (currentIndex - 1 + items.length) % items.length;
-      break;
-    case 'Home':
-      event.preventDefault();
-      nextIndex = 0;
-      break;
-    case 'End':
-      event.preventDefault();
-      nextIndex = items.length - 1;
-      break;
-    default:
-      return;
-  }
-
-  items.forEach((item, i) => {
-    item.setAttribute('tabindex', i === nextIndex ? '0' : '-1');
-  });
-  items[nextIndex].focus();
-}
-
-export function saveFocus() {
-  return document.activeElement;
-}
-
-export function restoreFocus(element) {
-  if (element && typeof element.focus === 'function') {
-    element.focus();
-  }
-}
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  'summary',
+  'details',
+].join(', ');
+
+function isFocusable(el) {
+  if (el.hasAttribute('disabled') || el.getAttribute('aria-hidden') === 'true') return false;
+  if (el.closest('[inert]')) return false;
+  const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+  if (style && (style.visibility === 'hidden' || style.display === 'none')) return false;
+  return el.getClientRects().length > 0;
+}
+
+export function getFocusableElements(root) {
+  return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
+}
+
+export function trapFocus(root, event) {
+  if (event.key !== 'Tab') return;
+
+  const focusable = getFocusableElements(root);
+  if (focusable.length === 0) return;
+
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+  const active = root.getRootNode().activeElement;
+
+  if (event.shiftKey && active === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && active === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+
+export function rovingTabindex(container, items, event) {
+  const currentIndex = items.indexOf(event.target);
+  if (currentIndex === -1) return;
+
+  let nextIndex;
+
+  switch (event.key) {
+    case 'ArrowDown':
+    case 'ArrowRight':
+      event.preventDefault();
+      nextIndex = (currentIndex + 1) % items.length;
+      break;
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      event.preventDefault();
+      nextIndex = (currentIndex - 1 + items.length) % items.length;
+      break;
+    case 'Home':
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case 'End':
+      event.preventDefault();
+      nextIndex = items.length - 1;
+      break;
+    default:
+      return;
+  }
+
+  items.forEach((item, i) => {
+    item.setAttribute('tabindex', i === nextIndex ? '0' : '-1');
+  });
+  items[nextIndex].focus();
+}
+
+export function saveFocus() {
+  return document.activeElement;
+}
+
+export function restoreFocus(element) {
+  if (element && typeof element.focus === 'function') {
+    element.focus();
+  }
+}
+
+let _inertSiblings = [];
+
+export function setBackgroundInert(except) {
+  _inertSiblings = [];
+  for (const child of document.body.children) {
+    if (child === except || child.contains(except)) continue;
+    if (!child.hasAttribute('inert')) {
+      child.setAttribute('inert', '');
+      _inertSiblings.push(child);
+    }
+  }
+}
+
+export function clearBackgroundInert() {
+  for (const el of _inertSiblings) {
+    el.removeAttribute('inert');
+  }
+  _inertSiblings = [];
+}

package/components/index.js

@@ -19,9 +19,28 @@ 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 VelinSparkline } from './velin-sparkline.js';
+export { default as VelinCounter } from './velin-counter.js';
+export { default as VelinLiveDot } from './velin-live-dot.js';
+export { initReveal } from './velin-reveal.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 } from './focus-manager.js';
+export { trapFocus, rovingTabindex, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
 
+import './velin-sparkline.js';
+import './velin-counter.js';
+import './velin-live-dot.js';
+import './velin-reveal.js';
+import './velin-flip.js';
 import { VelinHapticObserver } from './velin-haptic.js';
 if (typeof document !== 'undefined') {
   const _hapticInit = () => { new VelinHapticObserver().start(document.body); };

package/components/sanitize.js

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

package/components/shadow-a11y-styles.js

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

package/components/velin-accordion.js

@@ -1,98 +1,112 @@
-const styles = `
-  :host {
-    display: block;
-    border: 1px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.5rem);
-    overflow: hidden;
-  }
-  ::slotted(details) {
-    border-bottom: 1px solid var(--velin-color-border, #ddd);
-  }
-  ::slotted(details:last-child) {
-    border-bottom: none;
-  }
-  ::slotted(details > summary) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--velin-space-4, 1rem);
-    min-block-size: 2.75rem;
-    font-size: var(--velin-text-base, 1rem);
-    font-weight: var(--velin-weight-medium, 500);
-    cursor: pointer;
-    user-select: none;
-    list-style: none;
-  }
-  ::slotted(details > summary::-webkit-details-marker) {
-    display: none;
-  }
-`;
-
-class VelinAccordion extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this._onToggle = this._onToggle.bind(this);
-  }
-
-  connectedCallback() {
-    this.shadowRoot.innerHTML = `
-      <style>${styles}</style>
-      <div role="region" part="region"><slot></slot></div>
-    `;
-
-    this._exclusive = this.hasAttribute('exclusive');
-
-    this.addEventListener('toggle', this._onToggle, true);
-    this.addEventListener('keydown', this._onKeydown.bind(this));
-  }
-
-  _onToggle(event) {
-    if (!this._exclusive) return;
-    const openedDetail = event.target;
-    if (!openedDetail.open) return;
-
-    const details = [...this.querySelectorAll('details')];
-    details.forEach((d) => {
-      if (d !== openedDetail && d.open) {
-        d.open = false;
-      }
-    });
-  }
-
-  _onKeydown(event) {
-    const summaries = [...this.querySelectorAll('summary')];
-    const currentIndex = summaries.indexOf(event.target);
-    if (currentIndex === -1) return;
-
-    let nextIndex;
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        nextIndex = (currentIndex + 1) % summaries.length;
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        nextIndex = (currentIndex - 1 + summaries.length) % summaries.length;
-        break;
-      case 'Home':
-        event.preventDefault();
-        nextIndex = 0;
-        break;
-      case 'End':
-        event.preventDefault();
-        nextIndex = summaries.length - 1;
-        break;
-      default:
-        return;
-    }
-    summaries[nextIndex].focus();
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener('toggle', this._onToggle, true);
-  }
-}
-
-customElements.define('velin-accordion', VelinAccordion);
-export default VelinAccordion;
+const styles = `
+  :host {
+    display: block;
+    border: 1px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    overflow: hidden;
+  }
+  ::slotted(details) {
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  ::slotted(details:last-child) {
+    border-bottom: none;
+  }
+  ::slotted(details > summary) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--velin-space-4, 1rem);
+    min-block-size: 2.75rem;
+    font-size: var(--velin-text-base, 1rem);
+    font-weight: var(--velin-weight-medium, 500);
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
+  }
+  ::slotted(details > summary::-webkit-details-marker) {
+    display: none;
+  }
+`;
+
+class VelinAccordion extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._onToggle = this._onToggle.bind(this);
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <slot></slot>
+    `;
+
+    this._exclusive = this.hasAttribute('exclusive');
+    this._wireDetails();
+
+    this.addEventListener('toggle', this._onToggle, true);
+    this.addEventListener('keydown', this._onKeydown.bind(this));
+  }
+
+  _wireDetails() {
+    let panelIndex = 0;
+    for (const details of this.querySelectorAll('details')) {
+      const summary = details.querySelector('summary');
+      const panel = details.querySelector(':scope > :not(summary)');
+      const panelId = panel?.id || `velin-accordion-panel-${++panelIndex}`;
+      if (panel && !panel.id) panel.id = panelId;
+      if (summary && panel) {
+        summary.setAttribute('aria-controls', panelId);
+      }
+    }
+  }
+
+  _onToggle(event) {
+    if (!this._exclusive) return;
+    const openedDetail = event.target;
+    if (!openedDetail.open) return;
+
+    const details = [...this.querySelectorAll('details')];
+    details.forEach((d) => {
+      if (d !== openedDetail && d.open) {
+        d.open = false;
+      }
+    });
+  }
+
+  _onKeydown(event) {
+    const summaries = [...this.querySelectorAll('summary')];
+    const currentIndex = summaries.indexOf(event.target);
+    if (currentIndex === -1) return;
+
+    let nextIndex;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % summaries.length;
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + summaries.length) % summaries.length;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = summaries.length - 1;
+        break;
+      default:
+        return;
+    }
+    summaries[nextIndex].focus();
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('toggle', this._onToggle, true);
+  }
+}
+
+customElements.define('velin-accordion', VelinAccordion);
+export default VelinAccordion;