@birdapi/velinstyle 0.6.1 → 0.8.0

package/components/velin-sparkline.js

@@ -0,0 +1,207 @@
+/*
+ * <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 label = this.getAttribute('label');
+
+    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%';
+    if (label) {
+      svg.setAttribute('role', 'img');
+      svg.setAttribute('aria-label', label);
+    } else {
+      svg.setAttribute('aria-hidden', 'true');
+    }
+
+    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');
+    }
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('velin-sparkline')) {
+  customElements.define('velin-sparkline', VelinSparkline);
+}
+
+export default VelinSparkline;

package/components/velin-theme-toggle.js

@@ -1,91 +1,308 @@
+const THEMES = [
+  { slug: '', label: 'Default (Light)' },
+  { slug: 'dark', label: 'Dark' },
+  { slug: 'brutalist', label: 'Brutalist' },
+  { slug: 'corporate', label: 'Corporate' },
+  { slug: 'earth', label: 'Earth' },
+  { slug: 'forest', label: 'Forest' },
+  { slug: 'midnight', label: 'Midnight' },
+  { slug: 'neon', label: 'Neon' },
+  { slug: 'nordic', label: 'Nordic' },
+  { slug: 'ocean', label: 'Ocean' },
+  { slug: 'pastel', label: 'Pastel' },
+  { slug: 'retro', label: 'Retro' },
+  { slug: 'sharp', label: 'Sharp' },
+  { slug: 'soft', label: 'Soft' },
+  { slug: 'sunset', label: 'Sunset' },
+];
+
+const BUILTIN_THEMES = new Set(['', 'dark']);
+
+const loadedThemeStylesheets = new Set();
+
+function ensureThemeStylesheet(slug, base) {
+  if (!slug || BUILTIN_THEMES.has(slug)) return;
+  if (loadedThemeStylesheets.has(slug)) return;
+  const existing = document.querySelector(`link[data-velin-theme-css="${slug}"]`);
+  if (existing) {
+    loadedThemeStylesheets.add(slug);
+    return;
+  }
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = `${base.replace(/\/$/, '')}/${slug}.min.css`;
+  link.setAttribute('data-velin-theme-css', slug);
+  document.head.appendChild(link);
+  loadedThemeStylesheets.add(slug);
+}
+
 const styles = `
-  :host { display: inline-flex; }
+  :host { display: inline-flex; position: relative; }
+  .group {
+    display: inline-flex; align-items: stretch;
+    border: 2px solid var(--velin-color-border, #ddd);
+    border-radius: var(--velin-radius-md, 0.5rem);
+    background: none;
+    overflow: hidden;
+  }
   button {
     display: inline-flex; align-items: center; justify-content: center;
-    min-width: 2.75rem; min-height: 2.75rem; padding: 0.5rem;
-    background: none; border: 2px solid var(--velin-color-border, #ddd);
-    border-radius: var(--velin-radius-md, 0.5rem); cursor: pointer;
-    color: var(--velin-color-text, #111); transition: background 150ms ease, border-color 150ms ease;
+    min-height: 2.75rem; padding: 0.5rem;
+    background: none; border: 0; cursor: pointer;
+    color: var(--velin-color-text, #111);
+    transition: background 150ms ease;
+  }
+  button:hover { background: var(--velin-color-surface-dim, #eee); }
+  button:focus-visible {
+    outline: 3px solid var(--velin-color-focus, #2563eb);
+    outline-offset: 2px;
+  }
+  .toggle { min-width: 2.75rem; }
+  .picker {
+    min-width: 1.75rem;
+    border-inline-start: 1px solid var(--velin-color-border, #ddd);
+    color: var(--velin-color-text-muted, #555);
   }
-  button:hover { background: var(--velin-color-surface-dim, #eee); border-color: var(--velin-color-border-strong, #999); }
-  button:focus-visible { outline: 3px solid var(--velin-color-focus, #2563eb); outline-offset: 2px; }
   svg { width: 1.25rem; height: 1.25rem; transition: transform 300ms ease; }
+  .chev { width: 0.75rem; height: 0.75rem; }
   :host([theme="dark"]) .sun { display: none; }
   :host(:not([theme="dark"])) .moon { display: none; }
+  :host([compact]) .picker { display: none; }
+  :host([compact]) .toggle { border-inline-end: 0; }
   @media (prefers-reduced-motion: reduce) { svg { transition: none; } }
+
+  .menu {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    inset-inline-end: 0;
+    z-index: 1000;
+    min-width: 12rem;
+    padding: 0.375rem;
+    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 12px 32px rgba(0,0,0,0.12));
+    list-style: none;
+    margin: 0;
+    display: none;
+    max-height: min(70vh, 24rem);
+    overflow-y: auto;
+  }
+  :host([menu-open]) .menu { display: block; }
+  .menu li { margin: 0; }
+  .menu button {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--velin-color-text, #111);
+    border-radius: var(--velin-radius-sm, 0.25rem);
+    min-height: 2rem;
+    text-align: start;
+  }
+  .menu button:hover,
+  .menu button[aria-current="true"] {
+    background: var(--velin-color-primary-subtle, #eef);
+    color: var(--velin-color-primary, #2a4cf0);
+  }
+  .menu button[aria-current="true"] {
+    font-weight: 600;
+  }
+  .menu .swatch {
+    width: 0.75rem; height: 0.75rem;
+    border-radius: 50%;
+    margin-inline-end: 0.5rem;
+    background: currentColor;
+    border: 1px solid var(--velin-color-border, #ddd);
+  }
 `;
 
 class VelinThemeToggle extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._onDocClick = this._onDocClick.bind(this);
+    this._onKeyDown = this._onKeyDown.bind(this);
   }
 
   connectedCallback() {
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
-      <button part="button" aria-label="Toggle dark mode">
-        <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
-          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-          <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
-          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-        </svg>
-        <svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
-        </svg>
-      </button>
+      <div class="group" part="group">
+        <button class="toggle" part="button" aria-label="Toggle dark mode">
+          <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+          </svg>
+          <svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+          </svg>
+        </button>
+        <button class="picker" part="picker" aria-label="Choose theme" aria-haspopup="menu" aria-expanded="false">
+          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"/>
+          </svg>
+        </button>
+      </div>
+      <ul class="menu" role="menu" hidden></ul>
     `;
 
-    const target = this.getAttribute('target') || 'html';
-    const el = document.querySelector(target);
-    const stored = localStorage.getItem('velin-theme');
-    const prefersDarkMq = window.matchMedia('(prefers-color-scheme: dark)');
+    this._target = document.querySelector(this.getAttribute('target') || 'html');
+    this._themesBase = this.getAttribute('themes-base') || 'dist/themes';
+    this._menu = this.shadowRoot.querySelector('.menu');
+    this._toggleBtn = this.shadowRoot.querySelector('.toggle');
+    this._pickerBtn = this.shadowRoot.querySelector('.picker');
 
-    const applyFromPreference = () => {
-      if (localStorage.getItem('velin-theme')) return;
-      if (prefersDarkMq.matches) {
-        el?.setAttribute('data-velin-theme', 'dark');
-        this.setAttribute('theme', 'dark');
-      } else {
-        el?.removeAttribute('data-velin-theme');
-        this.removeAttribute('theme');
-      }
-    };
-
-    const prefersDark = prefersDarkMq.matches;
-
-    if (stored === 'dark' || (!stored && prefersDark)) {
-      el?.setAttribute('data-velin-theme', 'dark');
-      this.setAttribute('theme', 'dark');
-    }
+    this._renderMenu();
+    this._initPreference();
 
-    prefersDarkMq.addEventListener('change', applyFromPreference);
+    this._toggleBtn.addEventListener('click', () => this._toggleDarkMode());
+    this._pickerBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this._toggleMenu();
+    });
+
+    document.addEventListener('click', this._onDocClick);
+    this.shadowRoot.addEventListener('keydown', this._onKeyDown);
+
+    const prefersDarkMq = window.matchMedia('(prefers-color-scheme: dark)');
+    prefersDarkMq.addEventListener('change', () => this._applyFromPreference());
     window.addEventListener('storage', (e) => {
-      if (e.key !== 'velin-theme' || !el) return;
-      if (e.newValue === 'dark') {
-        el.setAttribute('data-velin-theme', 'dark');
-        this.setAttribute('theme', 'dark');
-      } else {
-        el.removeAttribute('data-velin-theme');
-        this.removeAttribute('theme');
-      }
+      if (e.key === 'velin-theme') this._readStorage();
     });
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onDocClick);
+  }
 
-    this.shadowRoot.querySelector('button').addEventListener('click', () => {
-      const isDark = el?.getAttribute('data-velin-theme') === 'dark';
-      if (isDark) {
-        el?.removeAttribute('data-velin-theme');
-        this.removeAttribute('theme');
-        localStorage.setItem('velin-theme', 'light');
-      } else {
-        el?.setAttribute('data-velin-theme', 'dark');
-        this.setAttribute('theme', 'dark');
-        localStorage.setItem('velin-theme', 'dark');
-      }
-      this.dispatchEvent(new CustomEvent('velin-theme-change', { bubbles: true, detail: { theme: isDark ? 'light' : 'dark', dark: !isDark } }));
+  _renderMenu() {
+    this._menu.innerHTML = THEMES.map((t) => `
+      <li role="none">
+        <button type="button" role="menuitem" data-theme="${t.slug}">
+          <span class="swatch" aria-hidden="true" data-theme-swatch="${t.slug}"></span>
+          ${t.label}
+        </button>
+      </li>
+    `).join('');
+    this._menu.removeAttribute('hidden');
+    this._menu.querySelectorAll('button[data-theme]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const slug = btn.getAttribute('data-theme');
+        this._applyTheme(slug, { persist: true });
+        this._closeMenu();
+      });
     });
   }
+
+  _toggleMenu() {
+    if (this.hasAttribute('menu-open')) this._closeMenu();
+    else this._openMenu();
+  }
+
+  _openMenu() {
+    this.setAttribute('menu-open', '');
+    this._pickerBtn.setAttribute('aria-expanded', 'true');
+    this._highlightActive();
+    const first = this._menu.querySelector('button[data-theme]');
+    if (first) first.focus();
+  }
+
+  _closeMenu() {
+    this.removeAttribute('menu-open');
+    this._pickerBtn.setAttribute('aria-expanded', 'false');
+  }
+
+  _onDocClick(e) {
+    if (!this.hasAttribute('menu-open')) return;
+    if (e.composedPath().includes(this)) return;
+    this._closeMenu();
+  }
+
+  _onKeyDown(e) {
+    if (!this.hasAttribute('menu-open')) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this._closeMenu();
+      this._pickerBtn.focus();
+      return;
+    }
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const items = Array.from(this._menu.querySelectorAll('button[data-theme]'));
+      const idx = items.indexOf(this.shadowRoot.activeElement);
+      const next = e.key === 'ArrowDown'
+        ? items[(idx + 1) % items.length]
+        : items[(idx - 1 + items.length) % items.length];
+      next?.focus();
+    }
+  }
+
+  _highlightActive() {
+    const current = this._currentSlug();
+    this._menu.querySelectorAll('button[data-theme]').forEach((btn) => {
+      const slug = btn.getAttribute('data-theme');
+      if (slug === current) btn.setAttribute('aria-current', 'true');
+      else btn.removeAttribute('aria-current');
+    });
+  }
+
+  _currentSlug() {
+    if (!this._target) return '';
+    const value = this._target.getAttribute('data-velin-theme');
+    if (!value || value === 'light') return '';
+    return value;
+  }
+
+  _initPreference() {
+    const stored = localStorage.getItem('velin-theme');
+    if (stored) {
+      this._applyTheme(stored, { persist: false });
+      return;
+    }
+    this._applyFromPreference();
+  }
+
+  _readStorage() {
+    const stored = localStorage.getItem('velin-theme');
+    this._applyTheme(stored || '', { persist: false });
+  }
+
+  _applyFromPreference() {
+    if (localStorage.getItem('velin-theme')) return;
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    this._applyTheme(prefersDark ? 'dark' : '', { persist: false });
+  }
+
+  _applyTheme(slug, { persist }) {
+    const normalized = !slug || slug === 'light' ? '' : slug;
+    if (!this._target) return;
+    if (!normalized) {
+      this._target.removeAttribute('data-velin-theme');
+      this.removeAttribute('theme');
+    } else {
+      this._target.setAttribute('data-velin-theme', normalized);
+      this.setAttribute('theme', normalized === 'dark' ? 'dark' : normalized);
+      ensureThemeStylesheet(normalized, this._themesBase);
+    }
+    if (persist) {
+      if (!normalized) localStorage.removeItem('velin-theme');
+      else localStorage.setItem('velin-theme', normalized);
+    }
+    this._highlightActive();
+    this.dispatchEvent(new CustomEvent('velin-theme-change', {
+      bubbles: true,
+      detail: { theme: normalized || 'light', dark: normalized === 'dark', slug: normalized },
+    }));
+  }
+
+  _toggleDarkMode() {
+    const current = this._currentSlug();
+    const next = current === 'dark' ? '' : 'dark';
+    this._applyTheme(next, { persist: true });
+  }
 }
 
 customElements.define('velin-theme-toggle', VelinThemeToggle);

package/components/velin-tooltip-wc.js

@@ -21,20 +21,24 @@ const styles = `
   @media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
 `;
 
+let tooltipId = 0;
+
 class VelinTooltipWC extends HTMLElement {
   static get observedAttributes() { return ['content', 'placement']; }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._tipId = `velin-tooltip-${++tooltipId}`;
   }
 
   connectedCallback() {
     const placement = this.getAttribute('placement') || 'top';
+    const D = 'div';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <slot></slot>
-      <div class="tip" role="tooltip" data-placement="${escapeHTML(placement)}" part="tip">${escapeHTML(this.getAttribute('content') || '')}</div>
+      <${D} class="tip" id="${this._tipId}" role="tooltip" data-placement="${escapeHTML(placement)}" part="tip">${escapeHTML(this.getAttribute('content') || '')}</${D}>
     `;
 
     this.addEventListener('mouseenter', () => this._show());
@@ -42,14 +46,34 @@ class VelinTooltipWC extends HTMLElement {
     this.addEventListener('focusin', () => this._show());
     this.addEventListener('focusout', () => this._hide());
     this.addEventListener('keydown', (e) => { if (e.key === 'Escape') this._hide(); });
+
+    const slot = this.shadowRoot.querySelector('slot');
+    slot.addEventListener('slotchange', () => this._linkTrigger());
+    this._linkTrigger();
+  }
+
+  _linkTrigger() {
+    const trigger = this.shadowRoot.querySelector('slot')?.assignedElements()[0];
+    if (!trigger) return;
+    if (this.hasAttribute('visible')) {
+      trigger.setAttribute('aria-describedby', this._tipId);
+    } else {
+      trigger.removeAttribute('aria-describedby');
+    }
   }
 
   _show() {
     this.setAttribute('visible', '');
+    const trigger = this.shadowRoot.querySelector('slot')?.assignedElements()[0];
+    if (trigger) trigger.setAttribute('aria-describedby', this._tipId);
     this._flip();
   }
 
-  _hide() { this.removeAttribute('visible'); }
+  _hide() {
+    this.removeAttribute('visible');
+    const trigger = this.shadowRoot.querySelector('slot')?.assignedElements()[0];
+    if (trigger) trigger.removeAttribute('aria-describedby');
+  }
 
   _flip() {
     const tip = this.shadowRoot.querySelector('.tip');