@colletdev/core 0.1.3

package/src/elements/table.js

@@ -0,0 +1,371 @@
+// Custom behavior for <cx-table> — uncontrolled by default, controlled when opted in.
+//
+// Uncontrolled: sort, select, expand, and paginate work without wiring up
+// state. The table manages its own sort order, selection, and page internally.
+// Controlled: pass sorts/selected props to take over. Same pattern as native
+// <input> — unmanaged until you pass value + onChange.
+//
+// Source: crates/wasm-api/src/table.rs
+
+// ─── Sort Direction Icons ───
+
+const SORT_ASC = '<svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v10M4 7l4-4 4 4"/></svg>';
+const SORT_DESC = '<svg class="size-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 13V3M4 9l4 4 4-4"/></svg>';
+const SORT_NEUTRAL = '<svg class="size-3.5 opacity-40" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4-3 4 3M4 10l4 3 4-3"/></svg>';
+
+export function defineCxTable(wasmFn, baseClass) {
+  class CxTable extends baseClass {
+    static observedAttributes = ['id', 'caption', 'columns', 'rows', 'variant', 'size', 'selectable', 'selected', 'sorts', 'pagination', 'hoverable', 'sticky-header', 'footer', 'empty-state', 'column-order', 'disabled', 'loading', 'error'];
+    static _booleanAttrs = new Set(['hoverable', 'sticky-header', 'disabled']);
+    static _numericAttrs = new Set(['loading']);
+
+    // ── Internal state (uncontrolled mode) ──
+    #sorts = [];            // [{column, direction}] — direction is 'ascending'|'descending'
+    #selected = new Set();  // row IDs
+
+    // ── Controlled detection ──
+    // Once a consumer sets sorts/selected externally (via attribute), the
+    // table stays controlled for that feature. Unset → uncontrolled.
+    #controlledSorts = false;
+    #controlledSelected = false;
+
+    attributeChangedCallback(name, oldVal, newVal) {
+      if (name === 'sorts' && newVal !== null) this.#controlledSorts = true;
+      if (name === 'selected' && newVal !== null) this.#controlledSelected = true;
+      super.attributeChangedCallback(name, oldVal, newVal);
+    }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // ── Checkbox change events (selection) ──
+        shadow.addEventListener('change', (e) => {
+          if (e.target.type !== 'checkbox') return;
+
+          // Select-all checkbox (in thead)
+          if (e.target.closest('thead')) {
+            this.#handleSelectAll(e.target.checked);
+            return;
+          }
+
+          // Individual row checkbox
+          const row = e.target.closest('tr[data-row-id]');
+          if (row) {
+            const rowId = row.getAttribute('data-row-id');
+            this.#handleRowSelect(rowId, e.target.checked);
+          }
+        });
+
+        // ── Click events (sort, expand, page, row select) ──
+        shadow.addEventListener('click', (e) => {
+          // Sort header button
+          const sortBtn = e.target.closest('[data-sort-column]');
+          if (sortBtn) {
+            this.#handleSort(sortBtn);
+            return;
+          }
+
+          // Expand/collapse button
+          const expandBtn = e.target.closest('button[aria-expanded][data-row-id]');
+          if (expandBtn) {
+            this.#handleExpand(expandBtn);
+            return;
+          }
+
+          // Page number button
+          const pageBtn = e.target.closest('[data-page]');
+          if (pageBtn) {
+            const page = parseInt(pageBtn.getAttribute('data-page'), 10);
+            if (!isNaN(page)) this.#handlePage(page);
+            return;
+          }
+
+          // Prev/Next pagination button (no data-page, inside <nav>)
+          const navBtn = e.target.closest('nav button');
+          if (navBtn && !navBtn.disabled && !navBtn.hasAttribute('data-page')) {
+            this.#handlePrevNext(navBtn);
+            return;
+          }
+
+          // Row click (non-button, non-checkbox area) → toggle selection
+          if (this._props.selectable && this._props.selectable !== 'none') {
+            const row = e.target.closest('tr[data-row-id]');
+            if (row && !row.hasAttribute('data-disabled') && !e.target.closest('button') && !e.target.closest('input')) {
+              const rowId = row.getAttribute('data-row-id');
+              const isSelected = this.#selected.has(rowId);
+              this.#handleRowSelect(rowId, !isSelected);
+            }
+          }
+        });
+
+        // Keyboard forwarding
+        shadow.addEventListener('keydown', (e) => {
+          this._emit('cx-keydown', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+        shadow.addEventListener('keyup', (e) => {
+          this._emit('cx-keyup', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    // ─── Sort ───
+
+    #handleSort(btn) {
+      const columnId = btn.getAttribute('data-sort-column');
+      const th = btn.closest('th[data-column-id]');
+      const currentSort = th?.getAttribute('aria-sort') || 'none';
+      // Cycle: none → ascending → descending → none
+      const next = currentSort === 'ascending' ? 'descending'
+        : currentSort === 'descending' ? 'none' : 'ascending';
+
+      if (!this.#controlledSorts) {
+        this.#applySortDOM(columnId, next);
+      }
+
+      this._emit('cx-sort', {
+        column_id: columnId,
+        direction: next === 'ascending' ? 'asc' : next === 'descending' ? 'desc' : 'none'
+      });
+    }
+
+    #applySortDOM(columnId, direction) {
+      const table = this._shadow.querySelector('table');
+      if (!table) return;
+
+      // Update internal state
+      this.#sorts = direction === 'none' ? [] : [{ column: columnId, direction }];
+
+      // Sync to _props so WASM re-renders preserve sort indicators.
+      // _props.sorts is consumed by the WASM adapter for aria-sort + icon rendering.
+      this._props.sorts = this.#sorts.map(s => ({
+        column_id: s.column,
+        direction: s.direction === 'ascending' ? 'asc' : 'desc'
+      }));
+
+      // Update aria-sort + icons on all sortable headers
+      table.querySelectorAll('th[data-column-id]').forEach(h => {
+        const hId = h.getAttribute('data-column-id');
+        const isTarget = hId === columnId;
+        const sortDir = isTarget ? direction : 'none';
+        if (h.hasAttribute('aria-sort')) h.setAttribute('aria-sort', sortDir);
+        const btn = h.querySelector('button[data-sort-column]');
+        if (btn) {
+          const icon = btn.querySelector('span[aria-hidden]');
+          if (icon) {
+            icon.innerHTML = sortDir === 'ascending' ? SORT_ASC
+              : sortDir === 'descending' ? SORT_DESC : SORT_NEUTRAL;
+          }
+        }
+      });
+
+      // Remove multi-sort priority badges (uncontrolled = single-column sort)
+      table.querySelectorAll('[aria-label^="Sort priority"]').forEach(b => b.remove());
+
+      // Reorder tbody rows
+      this.#sortTbodyRows(table, columnId, direction);
+    }
+
+    #sortTbodyRows(table, columnId, direction) {
+      const tbody = table.querySelector('tbody');
+      if (!tbody) return;
+
+      const headers = Array.from(table.querySelectorAll('thead th'));
+      const th = table.querySelector(`th[data-column-id="${CSS.escape(columnId)}"]`);
+      const colIdx = headers.indexOf(th);
+      if (colIdx === -1) return;
+
+      // Collect non-detail rows
+      const rows = Array.from(tbody.querySelectorAll(':scope > tr:not([id$="-detail"])'));
+
+      if (direction === 'none') {
+        // Restore original order
+        rows.sort((a, b) => {
+          return (parseInt(a.getAttribute('data-original-index') || '0', 10))
+            - (parseInt(b.getAttribute('data-original-index') || '0', 10));
+        });
+      } else {
+        // Tag original order on first sort
+        rows.forEach((r, i) => {
+          if (!r.hasAttribute('data-original-index')) r.setAttribute('data-original-index', String(i));
+        });
+
+        // Detect numeric column (all non-empty cells parse as numbers)
+        const isNumeric = rows.every(r => {
+          const cells = r.querySelectorAll(':scope > td');
+          const v = (cells[colIdx]?.textContent || '').trim();
+          return v === '' || !isNaN(parseFloat(v));
+        });
+
+        rows.sort((a, b) => {
+          const va = (a.querySelectorAll(':scope > td')[colIdx]?.textContent || '').trim();
+          const vb = (b.querySelectorAll(':scope > td')[colIdx]?.textContent || '').trim();
+          const cmp = isNumeric
+            ? (parseFloat(va || '0') - parseFloat(vb || '0'))
+            : va.localeCompare(vb);
+          return direction === 'descending' ? -cmp : cmp;
+        });
+      }
+
+      // Re-append in sorted order (detail rows follow their parent)
+      rows.forEach(r => {
+        tbody.appendChild(r);
+        const ctrl = r.querySelector('button[aria-controls]');
+        if (ctrl) {
+          const detailId = ctrl.getAttribute('aria-controls');
+          if (detailId) {
+            const detail = tbody.querySelector(`[id="${CSS.escape(detailId)}"]`);
+            if (detail) tbody.appendChild(detail);
+          }
+        }
+      });
+    }
+
+    // ─── Selection ───
+
+    #handleRowSelect(rowId, selected) {
+      if (!this.#controlledSelected) {
+        const mode = this._props.selectable;
+        if (mode === 'single') {
+          this.#selected.clear();
+          if (selected) this.#selected.add(rowId);
+        } else {
+          if (selected) this.#selected.add(rowId);
+          else this.#selected.delete(rowId);
+        }
+        this._props.selected = [...this.#selected];
+        this.#syncSelectionDOM();
+      }
+
+      this._emit('cx-select', { selected: [...this.#selected], row_id: rowId });
+    }
+
+    #handleSelectAll(checked) {
+      if (!this.#controlledSelected) {
+        if (checked) {
+          // Select all non-disabled rows
+          this._shadow.querySelectorAll('tr[data-row-id]:not([data-disabled])').forEach(tr => {
+            this.#selected.add(tr.getAttribute('data-row-id'));
+          });
+        } else {
+          this.#selected.clear();
+        }
+        this._props.selected = [...this.#selected];
+        this.#syncSelectionDOM();
+      }
+
+      this._emit('cx-select', { selected: [...this.#selected] });
+    }
+
+    #syncSelectionDOM() {
+      const shadow = this._shadow;
+
+      // Update row checkboxes and aria-selected
+      shadow.querySelectorAll('tr[data-row-id]').forEach(tr => {
+        const rid = tr.getAttribute('data-row-id');
+        const isSel = this.#selected.has(rid);
+        if (tr.hasAttribute('aria-selected')) {
+          tr.setAttribute('aria-selected', String(isSel));
+        }
+        const cb = tr.querySelector('input[type="checkbox"]');
+        if (cb && !cb.disabled) cb.checked = isSel;
+      });
+
+      // Update select-all checkbox (multiple mode)
+      const selectAllCb = shadow.querySelector('thead input[type="checkbox"]');
+      if (selectAllCb) {
+        const enabledRows = shadow.querySelectorAll('tr[data-row-id]:not([data-disabled])');
+        const allSelected = enabledRows.length > 0
+          && [...enabledRows].every(r => this.#selected.has(r.getAttribute('data-row-id')));
+        selectAllCb.checked = allSelected;
+        selectAllCb.indeterminate = !allSelected && this.#selected.size > 0;
+      }
+    }
+
+    // ─── Expand ───
+
+    #handleExpand(btn) {
+      const rowId = btn.getAttribute('data-row-id');
+      const wasExpanded = btn.getAttribute('aria-expanded') === 'true';
+      const newExpanded = !wasExpanded;
+
+      btn.setAttribute('aria-expanded', String(newExpanded));
+
+      const detailId = btn.getAttribute('aria-controls');
+      const detail = detailId ? this._shadow.querySelector(`[id="${CSS.escape(detailId)}"]`) : null;
+      if (detail) {
+        if (newExpanded) detail.removeAttribute('hidden');
+        else detail.setAttribute('hidden', '');
+      }
+
+      // Swap chevron icon (SVG sprite <use> href)
+      const use = btn.querySelector('use');
+      if (use) {
+        const href = use.getAttribute('href') || '';
+        if (href === '#icon-chevron-right') use.setAttribute('href', '#icon-chevron-down');
+        else if (href === '#icon-chevron-down') use.setAttribute('href', '#icon-chevron-right');
+      }
+
+      this._emit('cx-expand', { row_id: rowId, expanded: newExpanded });
+    }
+
+    // ─── Pagination ───
+
+    #handlePage(page) {
+      const p = this._props.pagination;
+      if (!p || typeof p !== 'object') return;
+
+      p.current_page = page;
+      this._emit('cx-page', { page, page_size: p.page_size });
+      this._scheduleRender();
+    }
+
+    #handlePrevNext(btn) {
+      const p = this._props.pagination;
+      if (!p || typeof p !== 'object') return;
+
+      const current = p.current_page || 1;
+      const totalPages = Math.ceil((p.total_items || 0) / (p.page_size || 10));
+
+      // First non-page button in nav = prev, last = next
+      const nav = btn.closest('nav');
+      if (!nav) return;
+      const nonPageBtns = nav.querySelectorAll('button:not([data-page])');
+      const isPrev = nonPageBtns[0] === btn;
+      const target = isPrev ? current - 1 : current + 1;
+
+      if (target >= 1 && target <= totalPages) {
+        this.#handlePage(target);
+      }
+    }
+
+    // ─── Render ───
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Re-apply internal sort after DOM replacement (WASM renders rows
+        // in source order — DOM-level sort must be re-applied).
+        if (!this.#controlledSorts && this.#sorts.length > 0) {
+          const { column, direction } = this.#sorts[0];
+          const table = this._shadow.querySelector('table');
+          if (table) this.#sortTbodyRows(table, column, direction);
+        }
+
+        // Re-apply internal selection after DOM replacement
+        if (!this.#controlledSelected && this.#selected.size > 0) {
+          this.#syncSelectionDOM();
+        }
+      } catch (e) {
+        console.error('[cx-table]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-table', CxTable);
+  return CxTable;
+}

package/src/elements/tabs.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/tabs.rs
+
+export interface CxTabsAttributes {
+    id?: string;
+    label?: string;
+    items?: string;
+    defaultTab?: string;
+    variant?: 'underline' | 'enclosed' | 'pill';
+    orientation?: 'horizontal' | 'vertical';
+    width?: 'auto' | 'full';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-tabs': HTMLElement & CxTabsAttributes;
+  }
+}

package/src/elements/tabs.js

@@ -0,0 +1,139 @@
+// Custom behavior for <cx-tabs> — tab switching, indicator positioning, keyboard nav.
+// Mirrors static/_behaviors/tabs.js but operates inside shadow DOM.
+// Source: crates/wasm-api/src/tabs.rs
+
+export function defineCxTabs(wasmFn, baseClass) {
+  class CxTabs extends baseClass {
+    static observedAttributes = ['id', 'label', 'items', 'default-tab', 'variant', 'orientation', 'width', 'size'];
+    static _booleanAttrs = new Set([]);
+
+    #resizeObserver = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Tab click
+        shadow.addEventListener('click', (e) => {
+          const tab = e.target.closest('[role="tab"]');
+          if (tab && !tab.hasAttribute('aria-disabled')) {
+            const idx = parseInt(tab.getAttribute('data-tab-index'), 10);
+            if (!isNaN(idx)) {
+              this.#activateTab(idx);
+              tab.focus();
+            }
+          }
+        });
+
+        // Keyboard navigation (Arrow keys, Home/End)
+        shadow.addEventListener('keydown', (e) => {
+          const tab = e.target.closest('[role="tab"]');
+          if (!tab) return;
+
+          const tabs = shadow.querySelector('[data-tabs]');
+          const ori = tabs?.getAttribute('data-orientation') || 'horizontal';
+          const prev = ori === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+          const next = ori === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+
+          if (e.key === prev || e.key === next || e.key === 'Home' || e.key === 'End') {
+            e.preventDefault();
+            const all = Array.from(shadow.querySelectorAll('[role="tab"]:not([aria-disabled="true"])'));
+            const cur = all.indexOf(tab);
+            if (cur === -1) return;
+            let ni = cur;
+            if (e.key === next) ni = (cur + 1) % all.length;
+            else if (e.key === prev) ni = (cur - 1 + all.length) % all.length;
+            else if (e.key === 'Home') ni = 0;
+            else if (e.key === 'End') ni = all.length - 1;
+            const ti = parseInt(all[ni].getAttribute('data-tab-index'), 10);
+            if (!isNaN(ti)) {
+              this.#activateTab(ti);
+              all[ni].focus();
+            }
+          }
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      if (this.#resizeObserver) {
+        this.#resizeObserver.disconnect();
+        this.#resizeObserver = null;
+      }
+      super.disconnectedCallback();
+    }
+
+    #activateTab(index) {
+      const shadow = this._shadow;
+      const tabs = shadow.querySelector('[data-tabs]');
+      if (!tabs) return;
+
+      // Toggle radio inputs
+      const radios = tabs.querySelectorAll(':scope > input[type="radio"]');
+      if (radios[index]) radios[index].checked = true;
+
+      // Update ARIA on all tab buttons
+      const allTabs = tabs.querySelectorAll('[role="tab"]');
+      allTabs.forEach((t, i) => {
+        t.setAttribute('aria-selected', i === index ? 'true' : 'false');
+        t.setAttribute('tabindex', i === index ? '0' : '-1');
+      });
+
+      // Sync host prop — single source of truth for WASM re-renders.
+      // Direct _props mutation avoids triggering a re-render that would
+      // destroy DOM state and kill the indicator animation.
+      if (radios[index]) {
+        this._props.default_tab = radios[index].value || String(index);
+      }
+
+      this.#positionIndicator();
+      this._emit('cx-change', { index, value: radios[index]?.value });
+    }
+
+    #positionIndicator() {
+      const shadow = this._shadow;
+      const tablist = shadow.querySelector('[role="tablist"]');
+      const indicator = shadow.querySelector('[data-tab-indicator]');
+      const active = shadow.querySelector('[role="tab"][aria-selected="true"]');
+      if (!tablist || !indicator || !active) return;
+
+      tablist.style.setProperty('--ind-x', active.offsetLeft + 'px');
+      tablist.style.setProperty('--ind-y', active.offsetTop + 'px');
+      tablist.style.setProperty('--ind-w', active.offsetWidth + 'px');
+      tablist.style.setProperty('--ind-h', active.offsetHeight + 'px');
+    }
+
+    // ── Public imperative API ──
+    focus() { const el = this._shadow.querySelector('[role="tab"][aria-selected="true"]'); if (el) el.focus(); else super.focus(); }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Position indicator after render (no transition on first paint)
+        requestAnimationFrame(() => {
+          this.#positionIndicator();
+          const ind = this._shadow.querySelector('[data-tab-indicator]');
+          if (ind) {
+            requestAnimationFrame(() => ind.setAttribute('data-ready', ''));
+          }
+
+          // Observe tablist for resizes
+          if (!this.#resizeObserver && window.ResizeObserver) {
+            this.#resizeObserver = new ResizeObserver(() => this.#positionIndicator());
+            const tl = this._shadow.querySelector('[role="tablist"]');
+            if (tl) this.#resizeObserver.observe(tl);
+          }
+        });
+      } catch (e) {
+        console.error('[cx-tabs]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-tabs', CxTabs);
+  return CxTabs;
+}

package/src/elements/text.d.ts

@@ -0,0 +1,26 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/text.rs
+
+export interface CxTextAttributes {
+    id?: string;
+    role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
+    content?: string;
+    align?: 'start' | 'center' | 'end';
+    color?: 'primary' | 'inverse' | 'muted';
+    muted?: boolean;
+    strong?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    underlineStrong?: boolean;
+    truncate?: boolean;
+    lineClamp?: number;
+    balance?: boolean;
+    prose?: boolean;
+    elementAs?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-text': HTMLElement & CxTextAttributes;
+  }
+}

package/src/elements/text.js

@@ -0,0 +1,32 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/text.rs
+
+export function defineCxText(wasmFn, baseClass) {
+  class CxText extends baseClass {
+    static observedAttributes = ['id', 'role', 'align', 'color', 'muted', 'strong', 'italic', 'underline', 'underline-strong', 'truncate', 'line-clamp', 'balance', 'prose', 'element-as'];
+    static _booleanAttrs = new Set(['muted', 'strong', 'italic', 'underline', 'underline-strong', 'truncate', 'balance', 'prose']);
+    static _numericAttrs = new Set(['line-clamp']);
+    static _focusable = false;
+    static _hostDisplay = 'contents';
+
+  set line_clamp(v) { this._setProp('line_clamp', v); }
+  get line_clamp() { return this._props.line_clamp; }
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-text]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-text', CxText);
+  return CxText;
+}

package/src/elements/text_input.d.ts

@@ -0,0 +1,36 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/text_input.rs
+
+export interface CxTextInputAttributes {
+    id?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    kind?: 'text' | 'email' | 'password' | 'search' | 'multiline';
+    placeholder?: string;
+    value?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    prefixIcon?: string;
+    suffixIcon?: string;
+    passwordToggle?: boolean;
+    passwordVisible?: boolean;
+    name?: string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    autocomplete?: string;
+    rows?: number;
+    autoGrow?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-text-input': HTMLElement & CxTextInputAttributes;
+  }
+}