@birdapi/velinstyle 0.7.0 → 0.9.0

package/components/velin-segmented-control.js

@@ -0,0 +1,108 @@
+import { rovingTabindex } 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: block; }
+  .group {
+    display: inline-flex;
+    gap: var(--velin-space-1, 0.25rem);
+    padding: var(--velin-space-1, 0.25rem);
+    background: var(--velin-color-surface-dim, #eee);
+    border-radius: var(--velin-radius-md, 0.5rem);
+  }
+  ::slotted(button) {
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: var(--velin-space-2, 0.5rem) var(--velin-space-4, 1rem);
+    border: none;
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    background: transparent;
+    color: var(--velin-color-text-muted, #666);
+    cursor: pointer;
+    font-size: var(--velin-text-sm, 0.875rem);
+  }
+  ::slotted(button[aria-pressed="true"]) {
+    background: var(--velin-color-surface-bright, #fff);
+    color: var(--velin-color-text, #111);
+    font-weight: var(--velin-weight-semibold, 600);
+    box-shadow: var(--velin-shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
+  }
+`;
+
+class VelinSegmentedControl extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._onClick = this._onClick.bind(this);
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const label = escapeHTML(this.getAttribute('aria-label') || 'Segmented control');
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="group" role="group" aria-label="${label}"><slot></slot></div>
+    `;
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKey);
+    this.shadowRoot.querySelector('slot')?.addEventListener('slotchange', () => this._init());
+    this._init();
+  }
+
+  _getButtons() {
+    const slot = this.shadowRoot.querySelector('slot');
+    return slot ? slot.assignedElements().filter((el) => el.tagName === 'BUTTON') : [];
+  }
+
+  _init() {
+    const buttons = this._getButtons();
+    const selected = buttons.find((b) => b.hasAttribute('selected')) || buttons[0];
+    buttons.forEach((btn, i) => {
+      btn.setAttribute('aria-pressed', btn === selected ? 'true' : 'false');
+      btn.setAttribute('tabindex', btn === selected ? '0' : '-1');
+    });
+  }
+
+  _onClick(e) {
+    const btn = e.target.closest('button');
+    if (!btn || !this.contains(btn)) return;
+    this._select(btn);
+  }
+
+  _select(btn) {
+    this._getButtons().forEach((b) => {
+      b.setAttribute('aria-pressed', b === btn ? 'true' : 'false');
+      b.setAttribute('tabindex', b === btn ? '0' : '-1');
+    });
+    this.dispatchEvent(new CustomEvent('velin-change', { bubbles: true, detail: { value: btn.value || btn.textContent?.trim() } }));
+  }
+
+  _onKey(e) {
+    const buttons = this._getButtons();
+    if (!buttons.includes(e.target)) return;
+    rovingTabindex(this, buttons, e);
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+      const focused = buttons.find((b) => b.getAttribute('tabindex') === '0');
+      if (focused) this._select(focused);
+    }
+  }
+
+  static get observedAttributes() { return ['aria-label']; }
+
+  attributeChangedCallback(name) {
+    if (name === 'aria-label') {
+      const group = this.shadowRoot?.querySelector('.group');
+      if (group) group.setAttribute('aria-label', escapeHTML(this.getAttribute('aria-label') || 'Segmented control'));
+    }
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this._onClick);
+    this.removeEventListener('keydown', this._onKey);
+  }
+}
+
+customElements.define('velin-segmented-control', VelinSegmentedControl);
+export default VelinSegmentedControl;

package/components/velin-sheet.js

@@ -0,0 +1,107 @@
+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-overlay, 400);
+    background: var(--velin-color-overlay, rgba(0,0,0,0.4));
+    opacity: 0; visibility: hidden;
+    transition: opacity 200ms ease, visibility 200ms ease;
+  }
+  :host([open]) .overlay { opacity: 1; visibility: visible; }
+  .sheet {
+    position: fixed; inset-inline: 0; inset-block-end: 0;
+    z-index: var(--velin-z-modal, 500);
+    max-block-size: min(85vh, 32rem);
+    background: var(--velin-color-surface-bright, #fff);
+    border-radius: var(--velin-radius-lg, 0.75rem) var(--velin-radius-lg, 0.75rem) 0 0;
+    box-shadow: var(--velin-shadow-xl, 0 -4px 24px rgba(0,0,0,0.12));
+    display: flex; flex-direction: column;
+    transform: translateY(100%);
+    transition: transform 250ms ease;
+    padding-block-end: env(safe-area-inset-bottom, 0px);
+  }
+  :host([open]) .sheet { transform: translateY(0); }
+  .header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--velin-space-4, 1rem) var(--velin-space-5, 1.25rem);
+    border-bottom: 1px solid var(--velin-color-border, #ddd);
+  }
+  .title { font-size: var(--velin-text-lg, 1.25rem); font-weight: 600; margin: 0; }
+  .body { flex: 1; overflow-y: auto; padding: var(--velin-space-5, 1.25rem); }
+  @media (prefers-reduced-motion: reduce) { .overlay, .sheet { transition: none; } }
+`;
+
+class VelinSheet extends HTMLElement {
+  static get observedAttributes() { return ['open']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+    this._prev = null;
+    this._onKey = this._onKey.bind(this);
+  }
+
+  connectedCallback() {
+    const title = escapeHTML(this.getAttribute('title') || this.getAttribute('label') || '');
+    const titleId = 'velin-sheet-title';
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <div class="overlay" part="overlay"></div>
+      <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="sheet">
+        <div class="header" part="header">
+          <h2 class="title" id="${titleId}">${title}</h2>
+          <button class="close-btn" aria-label="Close" part="close">&#215;</button>
+        </div>
+        <div class="body" part="body"><slot></slot></div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
+    this.shadowRoot.querySelector('.overlay').addEventListener('click', () => this.close());
+    if (this.hasAttribute('open')) this._open();
+  }
+
+  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);
+    document.body.style.overflow = 'hidden';
+    requestAnimationFrame(() => {
+      const f = getFocusableElements(this.shadowRoot);
+      if (f.length) f[0].focus();
+    });
+  }
+
+  _close() {
+    document.removeEventListener('keydown', this._onKey);
+    document.body.style.overflow = '';
+    clearBackgroundInert();
+    restoreFocus(this._prev);
+  }
+
+  _onKey(e) {
+    if (e.key === 'Escape') { this.close(); return; }
+    trapFocus(this.shadowRoot, e);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this._onKey);
+    document.body.style.overflow = '';
+  }
+}
+
+customElements.define('velin-sheet', VelinSheet);
+export default VelinSheet;

package/components/velin-sparkline.js

@@ -0,0 +1,227 @@
+/*
+ * <velin-sparkline values="1,3,2,5,7,6,9" area glow animate="draw">
+ *
+ * Tiny inline-SVG line chart for KPI tiles, live dashboards, and "this week"
+ * trends. Renders into light DOM (no Shadow) so theme tokens cascade in for
+ * stroke color via `currentColor`. Animates the stroke draw-in once on mount
+ * using the chart-animation utility classes; calling `update(values)` swaps
+ * the path and runs a short value-bump on the host.
+ *
+ * Attributes:
+ *   values    CSV or JSON-array of numbers
+ *   width     viewBox width (default 320)
+ *   height    viewBox height (default 96)
+ *   min/max   clamp range (optional; otherwise derived from values)
+ *   area      truthy enables the gradient area fill
+ *   glow      truthy enables continuous drop-shadow pulse
+ *   animate   "draw" (default) or "none"
+ *   label     accessible label; sets role=img + aria-label
+ *
+ * Public API:
+ *   element.update(values: number[]): replaces the path with a new dataset.
+ *   element.values: number[] reflect getter/setter.
+ */
+
+const NS = 'http://www.w3.org/2000/svg';
+
+function parseValues(raw) {
+  if (!raw) return [];
+  const trimmed = String(raw).trim();
+  if (trimmed.startsWith('[')) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      return Array.isArray(parsed) ? parsed.map(Number).filter((n) => Number.isFinite(n)) : [];
+    } catch {
+      return [];
+    }
+  }
+  return trimmed
+    .split(/[\s,]+/)
+    .map((s) => Number.parseFloat(s))
+    .filter((n) => Number.isFinite(n));
+}
+
+function buildPoints(values, w, h, min, max) {
+  const n = values.length;
+  if (n === 0) return [];
+  if (n === 1) {
+    return [[0, h / 2], [w, h / 2]];
+  }
+  const range = Math.max(max - min, 1e-6);
+  const stepX = w / (n - 1);
+  return values.map((v, i) => {
+    const x = i * stepX;
+    const y = h - ((v - min) / range) * h;
+    return [x, y];
+  });
+}
+
+function pointsToPath(points) {
+  if (!points.length) return '';
+  return points.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');
+}
+
+function pointsToArea(points, h) {
+  if (!points.length) return '';
+  const line = pointsToPath(points);
+  const last = points[points.length - 1][0];
+  const first = points[0][0];
+  return `${line} L${last.toFixed(2)},${h} L${first.toFixed(2)},${h} Z`;
+}
+
+class VelinSparkline extends HTMLElement {
+  static get observedAttributes() {
+    return ['values', 'width', 'height', 'min', 'max', 'area', 'glow', 'animate', 'label'];
+  }
+
+  constructor() {
+    super();
+    this._values = [];
+    this._gradientId = `velin-spark-grad-${Math.random().toString(36).slice(2, 8)}`;
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+
+  get values() {
+    return this._values.slice();
+  }
+  set values(arr) {
+    if (!Array.isArray(arr)) return;
+    this._values = arr.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this.setAttribute('values', this._values.join(','));
+  }
+
+  update(values) {
+    if (!Array.isArray(values)) return;
+    this._values = values.filter((n) => Number.isFinite(Number(n))).map(Number);
+    this._render({ tick: true });
+  }
+
+  _render({ tick = false } = {}) {
+    const w = Number.parseFloat(this.getAttribute('width')) || 320;
+    const h = Number.parseFloat(this.getAttribute('height')) || 96;
+    const values = this._values.length ? this._values : parseValues(this.getAttribute('values'));
+    this._values = values;
+    if (!values.length) {
+      this.innerHTML = '';
+      return;
+    }
+    const minAttr = Number.parseFloat(this.getAttribute('min'));
+    const maxAttr = Number.parseFloat(this.getAttribute('max'));
+    const min = Number.isFinite(minAttr) ? minAttr : Math.min(...values);
+    const max = Number.isFinite(maxAttr) ? maxAttr : Math.max(...values);
+
+    const wantsArea = this.hasAttribute('area') && this.getAttribute('area') !== 'false';
+    const wantsGlow = this.hasAttribute('glow') && this.getAttribute('glow') !== 'false';
+    const animate = (this.getAttribute('animate') || 'draw').toLowerCase();
+
+    const points = buildPoints(values, w, h, min, max);
+    const linePath = pointsToPath(points);
+    const areaPath = wantsArea ? pointsToArea(points, h) : '';
+
+    this.innerHTML = '';
+    const svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+    svg.setAttribute('preserveAspectRatio', 'none');
+    svg.style.display = 'block';
+    svg.style.width = '100%';
+    svg.style.height = '100%';
+    this._applyA11y(svg);
+
+    if (wantsArea) {
+      const defs = document.createElementNS(NS, 'defs');
+      const grad = document.createElementNS(NS, 'linearGradient');
+      grad.setAttribute('id', this._gradientId);
+      grad.setAttribute('x1', '0');
+      grad.setAttribute('x2', '0');
+      grad.setAttribute('y1', '0');
+      grad.setAttribute('y2', '1');
+      const stops = [
+        ['0%', 'currentColor', '0.35'],
+        ['100%', 'currentColor', '0'],
+      ];
+      stops.forEach(([offset, color, op]) => {
+        const stop = document.createElementNS(NS, 'stop');
+        stop.setAttribute('offset', offset);
+        stop.setAttribute('stop-color', color);
+        stop.setAttribute('stop-opacity', op);
+        grad.appendChild(stop);
+      });
+      defs.appendChild(grad);
+      svg.appendChild(defs);
+
+      const area = document.createElementNS(NS, 'path');
+      area.setAttribute('d', areaPath);
+      area.setAttribute('fill', `url(#${this._gradientId})`);
+      area.setAttribute('stroke', 'none');
+      area.classList.add('velin-chart-area');
+      svg.appendChild(area);
+    }
+
+    const line = document.createElementNS(NS, 'path');
+    line.setAttribute('d', linePath);
+    line.setAttribute('fill', 'none');
+    line.setAttribute('stroke', 'currentColor');
+    line.setAttribute('stroke-width', '2');
+    line.setAttribute('stroke-linecap', 'round');
+    line.setAttribute('stroke-linejoin', 'round');
+    line.setAttribute('vector-effect', 'non-scaling-stroke');
+    svg.appendChild(line);
+    if (wantsGlow) svg.classList.add('velin-chart-glow');
+
+    this.appendChild(svg);
+
+    if (animate !== 'none') {
+      const len = (typeof line.getTotalLength === 'function' && line.getTotalLength()) || w;
+      line.style.setProperty('--velin-chart-len', len.toFixed(2));
+      line.classList.add('velin-chart-line');
+    } else {
+      line.style.strokeDasharray = '';
+      line.style.strokeDashoffset = '';
+    }
+
+    if (tick) {
+      this.classList.remove('velin-spark-tick');
+      void this.offsetWidth;
+      this.classList.add('velin-spark-tick');
+    }
+  }
+
+  _applyA11y(svg) {
+    const label = (this.getAttribute('label') || this.getAttribute('aria-label') || '').trim();
+    if (label) {
+      svg.setAttribute('role', 'img');
+      svg.setAttribute('aria-label', label);
+      svg.removeAttribute('aria-hidden');
+      svg.removeAttribute('aria-labelledby');
+      return;
+    }
+    const cap = this.closest('figure')?.querySelector('figcaption');
+    const capText = cap?.textContent?.trim();
+    if (capText) {
+      if (!cap.id) cap.id = `velin-sparkline-cap-${Math.random().toString(36).slice(2, 9)}`;
+      svg.setAttribute('role', 'img');
+      svg.setAttribute('aria-labelledby', cap.id);
+      svg.removeAttribute('aria-hidden');
+      svg.removeAttribute('aria-label');
+      return;
+    }
+    svg.setAttribute('role', 'presentation');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    svg.removeAttribute('aria-label');
+    svg.removeAttribute('aria-labelledby');
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('velin-sparkline')) {
+  customElements.define('velin-sparkline', VelinSparkline);
+}
+
+export default VelinSparkline;

package/components/{velin-stepper-wc.js → velin-stepper.js}

@@ -49,10 +49,14 @@ const styles = `
   .panels ::slotted(*) { display: none; }
   .panels ::slotted([data-active]) { display: block; }
   @media (prefers-reduced-motion: reduce) { .step__marker { transition: none; } }
+  .velin-sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
 `;
 
-class VelinStepperWC extends HTMLElement {
-  static get observedAttributes() { return ['active']; }
+class VelinStepper extends HTMLElement {
+  static get observedAttributes() { return ['active', 'aria-label', 'labels']; }
 
   constructor() {
     super();
@@ -67,19 +71,25 @@ class VelinStepperWC extends HTMLElement {
 
   _buildSteps() {
     const labels = (this.getAttribute('labels') || '').split(',').map(s => s.trim());
+    const listLabel = this.getAttribute('aria-label') || 'Progress';
     const stepsHTML = labels.map((label, i) => {
       const state = i < this._current ? 'completed' : i === this._current ? 'active' : '';
-      const marker = i < this._current ? '&#10003;' : (i + 1);
+      const status =
+        i < this._current ? 'completed' : i === this._current ? 'current step' : 'upcoming';
+      const marker =
+        i < this._current
+          ? '<span class="velin-sr-only">Completed</span><span aria-hidden="true">&#10003;</span>'
+          : `<span aria-hidden="true">${i + 1}</span>`;
       const ariaCurrent = i === this._current ? ' aria-current="step"' : '';
-      return `<div class="step ${state}" role="listitem"${ariaCurrent}><span class="step__marker" aria-hidden="true">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
+      const itemLabel = label ? `${label}, ${status}` : `Step ${i + 1}, ${status}`;
+      return `<div class="step ${state}" role="listitem" aria-label="${escapeHTML(itemLabel)}"${ariaCurrent}><span class="step__marker">${marker}</span><span class="step__label">${escapeHTML(label)}</span></div>`;
     }).join('');
 
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
-      <div class="steps" role="list" aria-label="Progress" part="steps">${stepsHTML}</div>
+      <div class="steps" role="list" aria-label="${escapeHTML(listLabel)}" part="steps">${stepsHTML}</div>
       <div class="panels" part="panels"><slot></slot></div>
     `;
-    this._updatePanels();
   }
 
   _updatePanels() {
@@ -124,5 +134,24 @@ class VelinStepperWC extends HTMLElement {
   }
 }
 
-customElements.define('velin-stepper-wc', VelinStepperWC);
-export default VelinStepperWC;
+/** @deprecated Use `<velin-stepper>` */
+class VelinStepperWC extends VelinStepper {
+  static _warned = false;
+
+  connectedCallback() {
+    if (!VelinStepperWC._warned && typeof console !== 'undefined' && console.warn) {
+      VelinStepperWC._warned = true;
+      console.warn('[velinstyle] <velin-stepper-wc> is deprecated; use <velin-stepper> instead.');
+    }
+    super.connectedCallback();
+  }
+}
+
+if (!customElements.get('velin-stepper')) {
+  customElements.define('velin-stepper', VelinStepper);
+}
+if (!customElements.get('velin-stepper-wc')) {
+  customElements.define('velin-stepper-wc', VelinStepperWC);
+}
+export default VelinStepper;
+export { VelinStepper, VelinStepperWC };