@birdapi/velinstyle 0.6.1 → 0.7.0

package/README.md

@@ -8,15 +8,14 @@
 <br>
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-2563eb?style=flat-square)](LICENSE)
-[![Release](https://img.shields.io/badge/Release-v0.6.1-2563eb?style=flat-square)](CHANGELOG.md)
+[![Release](https://img.shields.io/badge/Release-v0.7.0-2563eb?style=flat-square)](CHANGELOG.md)
 [![WCAG AA](https://img.shields.io/badge/WCAG-AA-16a34a?style=flat-square)](docs/a11y.html)
 [![CSS min](https://img.shields.io/badge/CSS_min-~46KB-15803d?style=flat-square)]()
 [![JS min](https://img.shields.io/badge/JS_min-~66KB-15803d?style=flat-square)]()
-[![npm](https://img.shields.io/badge/npm-publish_pending-64748b?style=flat-square)](https://www.npmjs.com/package/@birdapi/velinstyle)
+[![npm version](https://img.shields.io/npm/v/@birdapi/velinstyle?style=flat-square)](https://www.npmjs.com/package/@birdapi/velinstyle)
+[![GitHub Pages](https://img.shields.io/badge/docs-GitHub_Pages-2563eb?style=flat-square)](https://skylitedesign.github.io/velinstyle/)
 
-<!-- After npm publish: https://img.shields.io/npm/v/velinstyle?style=flat-square -->
-
-[Website](https://velinstyle.info) · [Docs](docs/index.html) · [Samples](samples/) · [Playground](tools/playground/index.html) · [Theme Builder](tools/theme-builder/index.html) · [Issues](https://github.com/SkyliteDesign/velinstyle/issues)
+[Documentation](https://skylitedesign.github.io/velinstyle/) · [npm](https://www.npmjs.com/package/@birdapi/velinstyle) · [Samples](samples/) · [Playground](tools/playground/index.html) · [Theme Builder](tools/theme-builder/index.html) · [Issues](https://github.com/SkyliteDesign/velinstyle/issues)
 
 **English** · **[Deutsch](README.de.md)**
 
@@ -114,16 +113,16 @@ npm install @birdapi/velinstyle
 ### <span>②</span> Link CSS + components (ES modules)
 
 ```html
-<link rel="stylesheet" href="node_modules/velinstyle/dist/velinstyle.min.css">
-<script type="module" src="node_modules/velinstyle/dist/velinstyle-components.min.js"></script>
+<link rel="stylesheet" href="node_modules/@birdapi/velinstyle/dist/velinstyle.min.css">
+<script type="module" src="node_modules/@birdapi/velinstyle/dist/velinstyle-components.min.js"></script>
 ```
 
 <details>
 <summary><strong>CDN alternative</strong> (skip npm install)</summary>
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/velinstyle@latest/dist/velinstyle.min.css">
-<script type="module" src="https://unpkg.com/velinstyle@latest/dist/velinstyle-components.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@latest/dist/velinstyle.min.css">
+<script type="module" src="https://unpkg.com/@birdapi/velinstyle@latest/dist/velinstyle-components.min.js"></script>
 ```
 
 </details>

package/cli/index.js

@@ -11,7 +11,7 @@ const PKG_ROOT = join(__dirname, '..');
 const args = process.argv.slice(2);
 const command = args[0];
 
-const LAYERS = ['tokens', 'reset', 'base', 'a11y', 'layout', 'components', 'utilities', 'helpers'];
+const LAYERS = ['tokens', 'reset', 'base', 'a11y', 'layout', 'components', 'utilities', 'security', 'helpers'];
 
 const LAYER_FILES = {
   tokens: [
@@ -24,8 +24,9 @@ const LAYER_FILES = {
   a11y: [
     'a11y/sr-only.css', 'a11y/skip-link.css', 'a11y/reduced-motion.css',
     'a11y/forced-colors.css', 'a11y/skeleton.css', 'a11y/preferences.css',
-    'a11y/security.css',
+    'a11y/focus-not-obscured.css', 'a11y/target-size.css', 'a11y/high-contrast-aaa.css',
   ],
+  security: ['a11y/security.css'],
   layout: [
     'layout/breakpoints.css', 'layout/container.css', 'layout/grid.css',
     'layout/flex.css', 'layout/patterns.css',
@@ -78,7 +79,7 @@ function hasFlag(flag, alias) {
 
 function help() {
   console.log(`
-  ${C.bold('VelinStyle CLI')} v0.6.1
+  ${C.bold('VelinStyle CLI')} v0.7.0
 
   ${C.bold('Usage:')}
     velinstyle init                 Create velinstyle.config.js

package/cli/scanner.js

@@ -207,6 +207,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;
 }
 

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

@@ -20,7 +20,7 @@ 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 { 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 { VelinHapticObserver } from './velin-haptic.js';
 if (typeof document !== 'undefined') {

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;

package/components/velin-carousel.js

@@ -25,9 +25,15 @@ const styles = `
   button:disabled { opacity: 0.3; cursor: not-allowed; }
   svg { width: 1.25rem; height: 1.25rem; }
   .indicators {
-    display: flex; justify-content: center; gap: var(--velin-space-2, 0.5rem);
+    display: flex; justify-content: center; align-items: center; gap: var(--velin-space-2, 0.5rem);
     padding-block: var(--velin-space-3, 0.75rem);
   }
+  .pause-btn {
+    font-size: var(--velin-text-xs, 0.75rem);
+    padding-inline: var(--velin-space-3, 0.75rem);
+    min-inline-size: auto;
+    border-radius: var(--velin-radius-md, 0.375rem);
+  }
   .dot {
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 2.75rem; min-height: 2.75rem;
@@ -54,6 +60,7 @@ class VelinCarousel extends HTMLElement {
     this._index = 0;
     this._timer = null;
     this._startX = 0;
+    this._autoplayPaused = false;
   }
 
   connectedCallback() {
@@ -68,7 +75,7 @@ class VelinCarousel extends HTMLElement {
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
         </button>
       </div>
-      <div class="indicators" role="tablist" aria-label="Slide indicators" part="indicators"></div>
+      <div class="indicators" role="group" aria-label="Slide indicators" part="indicators"></div>
     `;
 
     this.shadowRoot.querySelector('.prev').addEventListener('click', () => this.prev());
@@ -128,18 +135,46 @@ class VelinCarousel extends HTMLElement {
     c.innerHTML = '';
     this._slides.forEach((_, i) => {
       const d = document.createElement('button');
+      d.type = 'button';
       d.className = 'dot';
-      d.setAttribute('role', 'tab');
-      d.setAttribute('aria-label', `Slide ${i + 1}`);
+      d.setAttribute('aria-label', `Go to slide ${i + 1}`);
       d.addEventListener('click', () => this.goTo(i));
       c.appendChild(d);
     });
+    if (this.hasAttribute('autoplay')) {
+      const pause = document.createElement('button');
+      pause.type = 'button';
+      pause.className = 'pause-btn';
+      pause.setAttribute('aria-pressed', 'false');
+      pause.setAttribute('aria-label', 'Pause automatic slide show');
+      pause.textContent = 'Pause';
+      pause.addEventListener('click', () => this._toggleAutoplayPause(pause));
+      c.appendChild(pause);
+    }
+    this._update();
+  }
+
+  _toggleAutoplayPause(btn) {
+    this._autoplayPaused = !this._autoplayPaused;
+    if (this._autoplayPaused) {
+      this._pause();
+      btn.setAttribute('aria-pressed', 'true');
+      btn.setAttribute('aria-label', 'Resume automatic slide show');
+      btn.textContent = 'Play';
+    } else {
+      this._resume();
+      btn.setAttribute('aria-pressed', 'false');
+      btn.setAttribute('aria-label', 'Pause automatic slide show');
+      btn.textContent = 'Pause';
+    }
   }
 
   _emit() { this.dispatchEvent(new CustomEvent('velin-slide-change', { bubbles: true, detail: { index: this._index } })); }
   _startAutoplay() { const ms = parseInt(this.getAttribute('interval') || '5000', 10); this._timer = setInterval(() => this.next(), ms); }
   _pause() { if (this._timer) { clearInterval(this._timer); this._timer = null; } }
-  _resume() { if (this.hasAttribute('autoplay') && !this._timer) this._startAutoplay(); }
+  _resume() {
+    if (this.hasAttribute('autoplay') && !this._timer && !this._autoplayPaused) this._startAutoplay();
+  }
 
   disconnectedCallback() { this._pause(); }
 }