sol-components 2.1.0

package/web/views/accordion.js

@@ -0,0 +1,133 @@
+import { adopt } from '../../core/adopt.js';
+import { CSS as ACCORDION_VIEW_CSS, sheet as ACCORDION_SHEET } from '../styles/view-accordion-css.js';
+
+/**
+ * Built-in view renderer for sol-query — "accordion".
+ *
+ * Panel mode — query-driven (default): one <details> per result row. Summary
+ * = first column; body = remaining columns as key/value pairs.
+ *
+ * Panel mode — author-supplied: if the <sol-query> host element has child
+ * <div>s in its light DOM, each div becomes one panel instead. Summary is
+ * the div's `data-summary` attribute, or its first heading child, or
+ * "Panel N". The div's HTML becomes the panel body.
+ *
+ * Mutually-exclusive: opening one panel closes all the others.
+ *
+ * Usage: <sol-query view="accordion" endpoint="…"></sol-query>
+ */
+export function render(container, data, host) {
+  const shortUri = v => v.replace(/.*[/#]([^/#]+)\/?$/, '$1') || v;
+
+  const renderCellInto = (parent, cell) => {
+    if (!cell) return;
+    if (cell.type === 'multi') {
+      cell.values.forEach((v, i) => {
+        if (i > 0) parent.appendChild(document.createTextNode(', '));
+        renderCellInto(parent, v);
+      });
+      return;
+    }
+    if (cell.type === 'uri') {
+      const a = document.createElement('a');
+      a.href = cell.value;
+      a.textContent = shortUri(cell.value);
+      a.title = cell.value;
+      a.dataset.uri = cell.value;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      parent.appendChild(a);
+    } else {
+      parent.appendChild(document.createTextNode(cell.value ?? ''));
+    }
+  };
+
+  // Native single-open behavior via <details name="...">. Each renderer
+  // instance gets a unique group name so multiple accordions on a page
+  // don't interfere with each other.
+  const groupName = `sol-accordion-${Math.random().toString(36).slice(2, 9)}`;
+
+  const wrapper = document.createElement('div');
+  wrapper.className = 'sol-view-accordion';
+
+  // ── Author-supplied panels: light-DOM <div> children of the host ──────────
+  const authorDivs = host
+    ? Array.from(host.children).filter(el => el.tagName === 'DIV')
+    : [];
+
+  if (authorDivs.length) {
+    authorDivs.forEach((srcDiv, i) => {
+      const det = document.createElement('details');
+      det.name = groupName;
+      if (i === 0) det.open = true;
+
+      const sum = document.createElement('summary');
+      const explicit = srcDiv.getAttribute('data-summary');
+      const heading  = srcDiv.querySelector('h1,h2,h3,h4,h5,h6');
+      sum.textContent = explicit ?? heading?.textContent?.trim() ?? `Panel ${i + 1}`;
+      det.appendChild(sum);
+
+      const body = document.createElement('div');
+      body.className = 'accordion-body';
+      // Clone so the light-DOM source stays untouched; also drops the heading
+      // we just lifted into the summary (if any).
+      const clone = srcDiv.cloneNode(true);
+      if (!explicit && heading) {
+        const h = clone.querySelector('h1,h2,h3,h4,h5,h6');
+        h?.remove();
+      }
+      while (clone.firstChild) body.appendChild(clone.firstChild);
+      det.appendChild(body);
+      wrapper.appendChild(det);
+    });
+    attachWrapperAndStyle(container, wrapper);
+    return;
+  }
+
+  // ── Query-driven panels ───────────────────────────────────────────────────
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) {
+    container.textContent = 'No results';
+    return;
+  }
+
+  const summaryText = row => {
+    const firstCell = row[vars[0]];
+    if (!firstCell) return '(row)';
+    if (firstCell.type === 'uri') return shortUri(firstCell.value);
+    return firstCell.value ?? '';
+  };
+
+  bindings.forEach((row, i) => {
+    const det = document.createElement('details');
+    det.name = groupName;
+    if (i === 0) det.open = true;
+
+    const sum = document.createElement('summary');
+    sum.textContent = summaryText(row);
+    det.appendChild(sum);
+
+    const body = document.createElement('dl');
+    const restVars = vars.length > 1 ? vars.slice(1) : vars;
+    restVars.forEach(v => {
+      const cell = row[v];
+      if (!cell) return;
+      const dt = document.createElement('dt');
+      dt.textContent = v;
+      const dd = document.createElement('dd');
+      renderCellInto(dd, cell);
+      body.appendChild(dt);
+      body.appendChild(dd);
+    });
+    det.appendChild(body);
+    wrapper.appendChild(det);
+  });
+
+  attachWrapperAndStyle(container, wrapper);
+}
+
+function attachWrapperAndStyle(container, wrapper) {
+  adopt(container.getRootNode(), { sheet: ACCORDION_SHEET, css: ACCORDION_VIEW_CSS });
+  container.appendChild(wrapper);
+}

package/web/views/anchorlist.js

@@ -0,0 +1,59 @@
+import { adopt } from '../../core/adopt.js';
+import { CSS as ANCHORLIST_CSS, sheet as ANCHORLIST_SHEET } from '../styles/view-anchorlist-css.js';
+
+/**
+ * Built-in view renderer for sol-query — "anchorlist".
+ * Renders results as a flat unordered list of anchor links.
+ *
+ * Display rules per row:
+ *   - Picks the first URI cell as the href.
+ *   - Label = first non-URI literal cell, else the shortened form of the URI.
+ *   - If no URI cell exists, renders a plain <li> with the first cell's value.
+ *
+ * Usage: <sol-query view="anchorlist" endpoint="…"></sol-query>
+ */
+export function render(container, data) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) {
+    container.textContent = 'No results';
+    return;
+  }
+
+  const shortUri = v => v.replace(/.*[/#]([^/#]+)\/?$/, '$1') || v;
+
+  const pickFirst = (row, predicate) => {
+    for (const v of vars) {
+      const cell = row[v];
+      if (cell && predicate(cell)) return cell;
+    }
+    return null;
+  };
+
+  const ul = document.createElement('ul');
+  ul.className = 'sol-view-anchorlist';
+
+  bindings.forEach(row => {
+    const li = document.createElement('li');
+    const uriCell     = pickFirst(row, c => c.type === 'uri');
+    const literalCell = pickFirst(row, c => c.type !== 'uri' && c.type !== 'multi' && c.value);
+
+    if (uriCell) {
+      const a = document.createElement('a');
+      a.href = uriCell.value;
+      a.textContent = literalCell?.value ?? shortUri(uriCell.value);
+      a.title = uriCell.value;
+      a.dataset.uri = uriCell.value;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      li.appendChild(a);
+    } else {
+      const first = row[vars[0]];
+      li.textContent = first?.value ?? '';
+    }
+    ul.appendChild(li);
+  });
+
+  adopt(container.getRootNode(), { sheet: ANCHORLIST_SHEET, css: ANCHORLIST_CSS });
+  container.appendChild(ul);
+}

package/web/views/auto-complete.js

@@ -0,0 +1,183 @@
+import { adopt } from '../../core/adopt.js';
+import { CSS as AUTOCOMPLETE_CSS, sheet as AUTOCOMPLETE_SHEET } from '../styles/view-autocomplete-css.js';
+
+export function render(container, data, host) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) {
+    container.textContent = 'No results';
+    return;
+  }
+
+  const shortUri = v => v.replace(/.*[/#]([^/#]+)\/?$/, '$1') || v;
+  const cellText = cell => {
+    if (!cell) return '';
+    if (cell.type === 'uri') return shortUri(cell.value);
+    return cell.value ?? '';
+  };
+  const cellValue = cell => (cell ? cell.value ?? '' : '');
+
+  const items = bindings.map((row, i) => {
+    const cells = vars.map(v => row[v]);
+    return {
+      value: cellValue(cells[0]),
+      label: vars.length > 1 ? cellText(cells[1]) : cellText(cells[0]),
+      row,
+      index: i,
+    };
+  });
+
+  const wrapper = document.createElement('div');
+  wrapper.className = 'sol-view-autocomplete';
+
+  const inputWrapper = document.createElement('div');
+  inputWrapper.className = 'ac-input-wrapper';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-expanded', 'false');
+  input.placeholder = host?.getAttribute('placeholder') ?? 'type to search...';
+
+  const goButton = document.createElement('button');
+  goButton.type = 'button';
+  goButton.textContent = host?.getAttribute('go-label') ?? 'Go';
+  goButton.className = 'sol-btn sol-btn-primary ac-go-button';
+
+  inputWrapper.appendChild(input);
+  inputWrapper.appendChild(goButton);
+
+  const listWrapper = document.createElement('div');
+  listWrapper.className = 'ac-list-wrapper';
+  listWrapper.hidden = true;
+
+  const list = document.createElement('ul');
+  list.className = 'ac-list';
+  list.setAttribute('role', 'listbox');
+
+  listWrapper.appendChild(list);
+
+  let activeIndex = -1;
+  let visible = items;
+  let selectedItem = null;
+
+  const fire = item => {
+    input.value = item.label;
+    input.setAttribute('aria-expanded', 'false');
+    listWrapper.hidden = true;
+    selectedItem = item;
+    host?.dispatchEvent(new CustomEvent('sol-select', {
+      bubbles: true, composed: true,
+      detail: { value: item.value, row: item.row, index: item.index },
+    }));
+  };
+
+  const handleAutoComplete = () => {
+    if (!selectedItem) {
+      alert('No item selected');
+      return;
+    }
+
+    const callbackName = host?.getAttribute('callback');
+    if (callbackName && typeof window[callbackName] === 'function') {
+      window[callbackName](selectedItem.value, selectedItem.label);
+    } else {
+      alert(`ID: ${selectedItem.value}\nLabel: ${selectedItem.label}`);
+    }
+  };
+
+  goButton.addEventListener('click', handleAutoComplete);
+
+  const renderList = () => {
+    list.innerHTML = '';
+    visible.forEach((item, i) => {
+      const li = document.createElement('li');
+      li.textContent = item.label;
+      li.setAttribute('role', 'option');
+      li.dataset.index = String(i);
+      if (i === activeIndex) {
+        li.classList.add('active');
+        li.scrollIntoView({ block: 'nearest' });
+      }
+      list.appendChild(li);
+    });
+    const hasItems = visible.length > 0;
+    listWrapper.hidden = !hasItems;
+    input.setAttribute('aria-expanded', hasItems ? 'true' : 'false');
+  };
+
+  list.addEventListener('mousedown', e => {
+    const li = e.target.closest('li');
+    if (!li) return;
+    e.preventDefault();
+    const idx = parseInt(li.dataset.index, 10);
+    if (!isNaN(idx) && visible[idx]) {
+      fire(visible[idx]);
+    }
+  });
+
+  list.addEventListener('mousemove', e => {
+    const li = e.target.closest('li');
+    if (!li) return;
+    const idx = parseInt(li.dataset.index, 10);
+    if (!isNaN(idx) && idx !== activeIndex) {
+      activeIndex = idx;
+      renderList();
+    }
+  });
+
+  const filter = () => {
+    const q = input.value.trim().toLowerCase();
+    visible = q
+      ? items.filter(it => it.label.toLowerCase().startsWith(q))
+      : items.slice();
+    activeIndex = -1;
+    renderList();
+  };
+
+  input.addEventListener('input', filter);
+  input.addEventListener('click', () => {
+    if (!listWrapper.hidden) return;
+    input.value = '';
+    selectedItem = null;
+    filter();
+  });
+  input.addEventListener('keydown', e => {
+    if (listWrapper.hidden && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) { 
+      filter(); 
+      return; 
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (activeIndex === -1) {
+        activeIndex = 0;
+      } else {
+        activeIndex = Math.min(activeIndex + 1, visible.length - 1);
+      }
+      renderList();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (activeIndex === -1) {
+        activeIndex = visible.length - 1;
+      } else {
+        activeIndex = Math.max(activeIndex - 1, 0);
+      }
+      renderList();
+    } else if (e.key === 'Enter') {
+      if (activeIndex >= 0 && visible[activeIndex]) { 
+        e.preventDefault(); 
+        fire(visible[activeIndex]); 
+      }
+    } else if (e.key === 'Escape') {
+      listWrapper.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+    }
+  });
+
+  wrapper.appendChild(inputWrapper);
+  wrapper.appendChild(listWrapper);
+
+  adopt(container.getRootNode(), { sheet: AUTOCOMPLETE_SHEET, css: AUTOCOMPLETE_CSS });
+  container.appendChild(wrapper);
+}

package/web/views/dl.js

@@ -0,0 +1,38 @@
+import { termText, appendCell } from './_helpers.js';
+
+export function render(container, data, host, options = {}) {
+  const { hideHeader, mkBnodeLink } = options;
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  const dl       = document.createElement('dl');
+  const flat     = !!hideHeader;
+  const nameVar  = flat ? null : vars[0];
+  const restVars = flat ? vars : vars.slice(1);
+
+  bindings.forEach(row => {
+    if (nameVar) {
+      const dt = document.createElement('dt');
+      const nameCell = row[nameVar];
+      dt.textContent = termText(nameCell);
+      if (nameCell?.type === 'uri') dt.title = nameCell.value;
+      dl.appendChild(dt);
+    }
+
+    restVars.forEach(v => {
+      const dd = document.createElement('dd');
+      const label = document.createElement('span');
+      label.className = 'dl-field';
+      label.textContent = `${v} `;
+      dd.appendChild(label);
+
+      const valueSpan = document.createElement('span');
+      valueSpan.className = 'dl-value';
+      appendCell(valueSpan, row[v], mkBnodeLink);
+      dd.appendChild(valueSpan);
+
+      dl.appendChild(dd);
+    });
+  });
+
+  container.appendChild(dl);
+}

package/web/views/list.js

@@ -0,0 +1,19 @@
+import { render as renderTable } from './table.js';
+import { appendCell } from './_helpers.js';
+
+export function render(container, data, host, options = {}) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (vars.length > 1) return renderTable(container, data, host, options);
+
+  const { mkBnodeLink } = options;
+  const col = vars[0];
+  const ul = document.createElement('ul');
+  ul.className = 'result-list';
+  bindings.forEach(row => {
+    const li = document.createElement('li');
+    appendCell(li, row[col], mkBnodeLink);
+    ul.appendChild(li);
+  });
+  container.appendChild(ul);
+}

package/web/views/menu.js

@@ -0,0 +1,56 @@
+import { siblingUrl } from '../../core/here.js';
+
+/**
+ * Built-in view renderer for sol-query — "menu".
+ * Turns a result set of URIs + labels into a <sol-menu>. Each row becomes
+ * one menu item; clicking loads the URL into the content panel.
+ *
+ * Column selection: uses vars named `link` + `label` when present,
+ * otherwise falls back to the first two columns in order (1st = link,
+ * 2nd = label). If only one column is returned, it's used for both.
+ *
+ * Any additional result columns are forwarded as attributes on the anchor,
+ * so <sol-menu> can pass them through to the panel component.
+ *
+ * A `handler` attribute on the host <sol-query> is forwarded to the
+ * <sol-menu> element so authors can choose the component each item wraps:
+ *   <sol-query view="menu" handler="sol-live-edit" …>
+ *
+ * Usage: <sol-query view="menu" endpoint="…" sparql="SELECT ?link ?label …">
+ */
+
+export async function render(container, data, host) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) { container.textContent = 'No results'; return; }
+
+  const hasNamed = vars.includes('link') && vars.includes('label');
+  const linkVar  = hasNamed ? 'link'  : vars[0];
+  const labelVar = hasNamed ? 'label' : (vars[1] ?? vars[0]);
+  const extraVars = vars.filter(v => v !== linkVar && v !== labelVar);
+
+  await import(siblingUrl('../sol-menu.js', import.meta.url));
+
+  const menu = document.createElement('sol-menu');
+
+  const handler = host?.getAttribute?.('handler');
+  if (handler) menu.setAttribute('handler', handler);
+  const orientation = host?.getAttribute?.('orientation');
+  if (orientation) menu.setAttribute('orientation', orientation);
+
+  for (const row of bindings) {
+    const url   = row[linkVar]?.value;
+    const label = row[labelVar]?.value || url || '';
+    if (!url) continue;
+    const a = document.createElement('a');
+    a.setAttribute('href', url);
+    a.textContent = label;
+    for (const v of extraVars) {
+      const cell = row[v];
+      if (cell?.value != null) a.setAttribute(v, cell.value);
+    }
+    menu.appendChild(a);
+  }
+
+  container.appendChild(menu);
+}

package/web/views/rolodex.js

@@ -0,0 +1,126 @@
+import { adopt } from '../../core/adopt.js';
+import { CSS as ROLODEX_CSS, sheet as ROLODEX_SHEET } from '../styles/view-rolodex-css.js';
+
+/**
+ * Built-in view renderer for sol-query — "rolodex".
+ * Shows one result row at a time as a card, with prev/next buttons and an
+ * "N of M" counter. Each field (column) becomes a labelled line inside the
+ * card. Arrow keys navigate when the card has focus.
+ *
+ * Navigation wraps around at both ends. Clicking a card dispatches a
+ * 'sol-select' event with { value, row, index } on the host element.
+ *
+ * Usage: <sol-query view="rolodex" endpoint="…"></sol-query>
+ */
+export async function render(container, data, host) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) {
+    container.textContent = 'No results';
+    return;
+  }
+
+  const shortUri = v => v.replace(/.*[/#]([^/#]+)\/?$/, '$1') || v;
+
+  const renderCellInto = (parent, cell) => {
+    if (!cell) return;
+    if (cell.type === 'multi') {
+      cell.values.forEach((v, i) => {
+        if (i > 0) parent.appendChild(document.createTextNode(', '));
+        renderCellInto(parent, v);
+      });
+      return;
+    }
+    if (cell.type === 'uri') {
+      const a = document.createElement('a');
+      a.href = cell.value;
+      a.textContent = shortUri(cell.value);
+      a.title = cell.value;
+      a.dataset.uri = cell.value;
+      a.target = '_blank';
+      a.rel = 'noopener noreferrer';
+      parent.appendChild(a);
+    } else {
+      parent.appendChild(document.createTextNode(cell.value ?? ''));
+    }
+  };
+
+  const wrapper = document.createElement('div');
+  wrapper.className = 'sol-view-rolodex';
+  wrapper.tabIndex = 0;
+
+  const nav = document.createElement('div');
+  nav.className = 'rolodex-nav';
+
+  const prevBtn = document.createElement('button');
+  prevBtn.type = 'button';
+  prevBtn.className = 'sol-btn sol-btn-icon rolodex-btn';
+  prevBtn.setAttribute('aria-label', 'Previous record');
+  prevBtn.textContent = '‹';
+
+  const counter = document.createElement('span');
+  counter.className = 'rolodex-counter';
+  counter.setAttribute('aria-live', 'polite');
+
+  const nextBtn = document.createElement('button');
+  nextBtn.type = 'button';
+  nextBtn.className = 'sol-btn sol-btn-icon rolodex-btn';
+  nextBtn.setAttribute('aria-label', 'Next record');
+  nextBtn.textContent = '›';
+
+  nav.appendChild(prevBtn);
+  nav.appendChild(counter);
+  nav.appendChild(nextBtn);
+
+  const card = document.createElement('div');
+  card.className = 'rolodex-card';
+
+  wrapper.appendChild(nav);
+  wrapper.appendChild(card);
+
+  let index = 0;
+
+  const show = i => {
+    index = ((i % bindings.length) + bindings.length) % bindings.length;
+    const row = bindings[index];
+
+    card.innerHTML = '';
+    const dl = document.createElement('dl');
+    vars.forEach(v => {
+      const cell = row[v];
+      if (!cell) return;
+      const dt = document.createElement('dt');
+      dt.textContent = v;
+      const dd = document.createElement('dd');
+      renderCellInto(dd, cell);
+      dl.appendChild(dt);
+      dl.appendChild(dd);
+    });
+    card.appendChild(dl);
+    counter.textContent = `${index + 1} of ${bindings.length}`;
+  };
+
+  prevBtn.addEventListener('click', () => show(index - 1));
+  nextBtn.addEventListener('click', () => show(index + 1));
+
+  wrapper.addEventListener('keydown', e => {
+    if (e.key === 'ArrowLeft')  { e.preventDefault(); show(index - 1); }
+    else if (e.key === 'ArrowRight') { e.preventDefault(); show(index + 1); }
+  });
+
+  card.addEventListener('click', e => {
+    if (e.target.closest('a')) return;
+    const row = bindings[index];
+    const lastVar = vars[vars.length - 1];
+    const cell = row[lastVar];
+    host?.dispatchEvent(new CustomEvent('sol-select', {
+      bubbles: true, composed: true,
+      detail: { value: cell?.value ?? '', row, index },
+    }));
+  });
+
+  show(0);
+
+  adopt(container.getRootNode(), { sheet: ROLODEX_SHEET, css: ROLODEX_CSS });
+  container.appendChild(wrapper);
+}

package/web/views/select.js

@@ -0,0 +1,79 @@
+import { adopt } from '../../core/adopt.js';
+import { CSS as SELECT_VIEW_CSS, sheet as SELECT_SHEET } from '../styles/view-select-css.js';
+
+/**
+ * Built-in view renderer for sol-query — "select".
+ * Renders results as a <select> dropdown. Each row becomes one <option>.
+ *
+ * Display rules:
+ *   - 1 column  → option text = that value (URIs are shortened for readability,
+ *                 full URI stored in option.value).
+ *   - 2 columns → option text = col[0], option.value = col[1].
+ *   - 3+ cols   → option text = "col0 — col1", value = last column.
+ *
+ * Selection dispatches 'sol-select' with { value, row, index } on the host element
+ * so pages can react (filter another query, navigate, etc.). URI values also
+ * re-fire the sol-query's own dereference pathway by setting host endpoint, if
+ * the host element looks like a <sol-query>.
+ *
+ * Usage: <sol-query view="select" endpoint="…" wanted="…"></sol-query>
+ */
+export function render(container, data, host) {
+  const vars     = data.head.vars;
+  const bindings = data.results.bindings;
+  if (!bindings?.length) {
+    container.textContent = 'No results';
+    return;
+  }
+
+  const shortUri = v =>
+    v.replace(/.*[/#]([^/#]+)\/?$/, '$1') || v;
+
+  const cellText = cell => {
+    if (!cell) return '';
+    if (cell.type === 'uri') return shortUri(cell.value);
+    return cell.value ?? '';
+  };
+  const cellValue = cell => (cell ? cell.value ?? '' : '');
+
+  const select = document.createElement('select');
+  select.className = 'sol-view-select';
+
+  const placeholder = document.createElement('option');
+  placeholder.value = '';
+  placeholder.textContent = `— ${bindings.length} result${bindings.length === 1 ? '' : 's'} —`;
+  placeholder.disabled = true;
+  placeholder.selected = true;
+  select.appendChild(placeholder);
+
+  bindings.forEach((row, i) => {
+    const opt = document.createElement('option');
+    const cells = vars.map(v => row[v]);
+
+    if (vars.length === 1) {
+      opt.textContent = cellText(cells[0]);
+      opt.value = cellValue(cells[0]);
+    } else if (vars.length === 2) {
+      opt.textContent = cellText(cells[0]);
+      opt.value = cellValue(cells[1]);
+    } else {
+      opt.textContent = `${cellText(cells[0])} — ${cellText(cells[1])}`;
+      opt.value = cellValue(cells[cells.length - 1]);
+    }
+    opt.dataset.rowIndex = String(i);
+    select.appendChild(opt);
+  });
+
+  select.addEventListener('change', () => {
+    const i = parseInt(select.options[select.selectedIndex].dataset.rowIndex, 10);
+    const row = bindings[i];
+    const value = select.value;
+    host?.dispatchEvent(new CustomEvent('sol-select', {
+      bubbles: true, composed: true,
+      detail: { value, row, index: i },
+    }));
+  });
+
+  adopt(container.getRootNode(), { sheet: SELECT_SHEET, css: SELECT_VIEW_CSS });
+  container.appendChild(select);
+}