@colletdev/core 0.1.3

package/src/elements/autocomplete.js

@@ -0,0 +1,671 @@
+// Custom behavior for <cx-autocomplete> — fuzzy filter, selection, chips, keyboard nav.
+//
+// The Rust component renders:
+//   <div data-autocomplete data-floating-trigger> — input wrapper
+//     <input role="combobox"> — the text input
+//     <span data-chip="value"> — selected chips (multi-mode)
+//     <button data-autocomplete-clear> — clear button
+//   <div data-floating class="hidden data-[open]:block"> — dropdown
+//     <div role="listbox"> with <div role="option" data-value="..."> children
+//     <div data-no-results class="hidden"> — no results message
+//
+// This Custom Element wires up:
+//   - Input typing triggers fuzzy filter + dropdown open
+//   - Click/keyboard option selection
+//   - Single mode: show label in input, close dropdown
+//   - Multiple mode: show chips, keep dropdown open
+//   - Chip dismiss, clear button
+//   - Keyboard navigation (WAI-ARIA APG Editable Combobox)
+//
+// Source: crates/wasm-api/src/autocomplete.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      // Dropdown uses position:fixed (set by JS) to escape scroll container clipping.
+      '[data-floating] {',
+      '  z-index: 50;',
+      '  max-height: 15rem;',
+      '  overflow-y: auto;',
+      '}',
+      'button[aria-expanded="true"] > span[aria-hidden="true"],',
+      '[data-autocomplete][aria-expanded="true"] > span[aria-hidden="true"] {',
+      '  transform: rotate(180deg);',
+      '}',
+      '[role="option"][data-focused] {',
+      '  background-color: var(--color-secondary);',
+      '}',
+      '[role="option"]:not([aria-disabled="true"]):hover {',
+      '  background-color: var(--color-secondary);',
+      '  cursor: pointer;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+// ── Fuzzy matching ──
+
+function fuzzyMatch(text, query) {
+  let ti = 0;
+  for (let qi = 0; qi < query.length; qi++) {
+    let found = false;
+    while (ti < text.length) {
+      if (text[ti] === query[qi]) { ti++; found = true; break; }
+      ti++;
+    }
+    if (!found) return false;
+  }
+  return true;
+}
+
+function highlightMatch(original, query) {
+  if (!query) return null;
+  const lc = original.toLowerCase();
+  let qi = 0;
+  const parts = [];
+  for (let i = 0; i < original.length; i++) {
+    if (qi < query.length && lc[i] === query[qi]) {
+      parts.push(`<mark class="bg-transparent font-semibold text-[var(--color-text)]">${original[i]}</mark>`);
+      qi++;
+    } else {
+      parts.push(original[i]);
+    }
+  }
+  return qi < query.length ? null : parts.join('');
+}
+
+export function defineCxAutocomplete(wasmFn, baseClass) {
+  class CxAutocomplete extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'shape', 'size', 'mode', 'selected', 'query', 'placeholder', 'helper-text', 'error', 'disabled', 'required', 'readonly', 'name', 'allow-custom', 'clearable', 'items', 'groups'];
+    static _booleanAttrs = new Set(['disabled', 'required', 'readonly', 'allow-custom', 'clearable']);
+
+    #outsideClick = null;
+    #skipOpen = false;
+    #debounceTimer = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // ── Click handler ──
+        shadow.addEventListener('click', (e) => {
+          // Chip dismiss
+          const chipBtn = e.target.closest('[data-chip-remove]');
+          if (chipBtn) {
+            this.#removeChip(chipBtn.getAttribute('data-chip-remove'));
+            return;
+          }
+
+          // Clear button
+          const clearBtn = e.target.closest('[data-autocomplete-clear]');
+          if (clearBtn) {
+            this.#clearAll();
+            return;
+          }
+
+          // Option click (in dropdown)
+          const option = e.target.closest('[role="option"]');
+          if (option && !option.hasAttribute('aria-disabled')) {
+            this.#selectOption(option);
+            return;
+          }
+
+          // Chevron click while open → close
+          const wrapper = this.#getWrapper();
+          if (wrapper && this.#isOpen()) {
+            if (e.target.closest('[aria-hidden="true"]')) {
+              this.#close();
+              return;
+            }
+          }
+        });
+
+        // ── Input handler (typing → filter) ──
+        shadow.addEventListener('input', (e) => {
+          const input = e.target;
+          if (!input.matches || !input.matches('input[role="combobox"]')) return;
+
+          if (!this.#isOpen()) this.#open();
+          this._setFormValue(input.value);
+          this._emit('cx-input', { value: input.value });
+
+          // Debounce filter
+          if (this.#debounceTimer) clearTimeout(this.#debounceTimer);
+          this.#debounceTimer = setTimeout(() => this.#filter(input), 100);
+        });
+
+        // ── Focus → open ──
+        shadow.addEventListener('focusin', (e) => {
+          const input = e.target;
+          if (!input.matches || !input.matches('input[role="combobox"]')) return;
+          if (!this.#isOpen()) {
+            if (this.#skipOpen) { this.#skipOpen = false; }
+            else { this.#open(); }
+          }
+        });
+
+        // ── Keyboard handler ──
+        shadow.addEventListener('keydown', (e) => this.#handleKey(e));
+
+        // ── Click outside → close ──
+        this.#outsideClick = (e) => {
+          if (this.#isOpen() && !this.contains(e.target) && !this._shadow.contains(e.target)) {
+            this.#close();
+          }
+        };
+        document.addEventListener('mousedown', this.#outsideClick);
+
+        // ── Focus exit → close ──
+        // Must check both light DOM and shadow DOM — Node.contains() doesn't cross shadow boundaries.
+        shadow.addEventListener('focusout', () => {
+          setTimeout(() => {
+            if (this.#isOpen()) {
+              const active = shadow.activeElement || document.activeElement;
+              if (!this.contains(active) && !this._shadow.contains(active) && active !== this) {
+                this.#close();
+              }
+            }
+          }, 0);
+        });
+
+        // Forward focus events from inner interactive elements
+        shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+        });
+        shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Forward keyboard events from inner interactive elements
+        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();
+    }
+
+    disconnectedCallback() {
+      if (this.#outsideClick) {
+        document.removeEventListener('mousedown', this.#outsideClick);
+        this.#outsideClick = null;
+      }
+      if (this.#debounceTimer) {
+        clearTimeout(this.#debounceTimer);
+      }
+      super.disconnectedCallback();
+    }
+
+    // ── DOM accessors ──
+
+    #getWrapper() {
+      return this._shadow.querySelector('[data-autocomplete]');
+    }
+
+    #getInput() {
+      return this._shadow.querySelector('input[role="combobox"]');
+    }
+
+    #getDropdown() {
+      return this._shadow.querySelector('[data-floating]');
+    }
+
+    #getVisibleOptions() {
+      return Array.from(
+        this._shadow.querySelectorAll(
+          '[role="option"]:not([aria-disabled="true"]):not([hidden])'
+        )
+      );
+    }
+
+    #getMode() {
+      return this._props.mode || 'single';
+    }
+
+    // ── Dropdown state ──
+
+    #isOpen() {
+      const dd = this.#getDropdown();
+      return dd ? dd.hasAttribute('data-open') : false;
+    }
+
+    #open() {
+      const wrapper = this.#getWrapper();
+      const dd = this.#getDropdown();
+      if (!wrapper || !dd || this.#isOpen()) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      this._positionFloatingFixed(wrapper, dd, { matchWidth: true });
+
+      dd.setAttribute('data-open', '');
+      dd.classList.remove('hidden');
+      dd.style.display = 'block';
+      dd.style.pointerEvents = 'auto';
+      dd.style.opacity = '1';
+      wrapper.setAttribute('aria-expanded', 'true');
+
+      const input = this.#getInput();
+      if (input) input.setAttribute('aria-expanded', 'true');
+    }
+
+    #close() {
+      const wrapper = this.#getWrapper();
+      const dd = this.#getDropdown();
+      if (!wrapper || !dd) return;
+
+      dd.removeAttribute('data-open');
+      dd.classList.add('hidden');
+      dd.style.display = '';
+      dd.style.pointerEvents = '';
+      dd.style.opacity = '';
+      this._resetFloatingFixed(dd);
+      wrapper.setAttribute('aria-expanded', 'false');
+
+      const input = this.#getInput();
+      if (input) {
+        input.setAttribute('aria-expanded', 'false');
+        input.removeAttribute('aria-activedescendant');
+      }
+      this.#clearFocused();
+    }
+
+    // ── Fuzzy filter ──
+
+    #filter(input) {
+      const dd = this.#getDropdown();
+      if (!dd) return;
+
+      const query = (input.value || '').toLowerCase().trim();
+      const options = dd.querySelectorAll('[role="option"]');
+      let visible = 0;
+
+      options.forEach(o => {
+        const labelSpan = o.querySelector('.truncate');
+        const origText = labelSpan
+          ? (labelSpan.getAttribute('data-text') || labelSpan.textContent)
+          : o.textContent;
+        const text = origText.toLowerCase();
+
+        if (!query || fuzzyMatch(text, query)) {
+          o.removeAttribute('hidden');
+          o.style.display = '';
+          visible++;
+
+          // Highlight matching characters
+          if (labelSpan) {
+            if (query) {
+              if (!labelSpan.hasAttribute('data-text')) {
+                labelSpan.setAttribute('data-text', origText);
+              }
+              const hl = highlightMatch(origText, query);
+              if (hl) labelSpan.innerHTML = hl;
+              else labelSpan.textContent = origText;
+            } else if (labelSpan.hasAttribute('data-text')) {
+              labelSpan.textContent = labelSpan.getAttribute('data-text');
+            }
+          }
+        } else {
+          o.setAttribute('hidden', '');
+          o.style.display = 'none';
+          if (labelSpan && labelSpan.hasAttribute('data-text')) {
+            labelSpan.textContent = labelSpan.getAttribute('data-text');
+          }
+        }
+      });
+
+      // Hide empty group headers
+      dd.querySelectorAll('[role="group"]').forEach(g => {
+        const groupOpts = g.querySelectorAll('[role="option"]');
+        let anyVisible = false;
+        groupOpts.forEach(o => { if (!o.hasAttribute('hidden')) anyVisible = true; });
+        const header = g.querySelector('[role="presentation"]');
+        if (header) {
+          if (anyVisible) { header.removeAttribute('hidden'); header.style.display = ''; }
+          else { header.setAttribute('hidden', ''); header.style.display = 'none'; }
+        }
+        if (!anyVisible) { g.setAttribute('hidden', ''); g.style.display = 'none'; }
+        else { g.removeAttribute('hidden'); g.style.display = ''; }
+      });
+
+      // No-results message
+      const noRes = dd.querySelector('[data-no-results]');
+      if (noRes) {
+        if (visible === 0 && query) noRes.classList.remove('hidden');
+        else noRes.classList.add('hidden');
+      }
+    }
+
+    // ── Keyboard navigation ──
+
+    #handleKey(e) {
+      const input = this.#getInput();
+      if (!input || e.target !== input) return;
+
+      const isOpen = this.#isOpen();
+
+      switch (e.key) {
+        case 'Escape':
+          if (isOpen) {
+            e.preventDefault();
+            this.#close();
+          }
+          break;
+
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          if (!isOpen) {
+            this.#open();
+            this.#filter(input);
+          }
+          if (e.key === 'ArrowDown') this.#focusNext();
+          else this.#focusPrev();
+          break;
+
+        case 'Home':
+          if (isOpen) { e.preventDefault(); this.#focusFirst(); }
+          break;
+
+        case 'End':
+          if (isOpen) { e.preventDefault(); this.#focusLast(); }
+          break;
+
+        case 'Enter': {
+          const activeId = input.getAttribute('aria-activedescendant');
+          const activeOpt = activeId ? this._shadow.getElementById(activeId) : null;
+          if (activeOpt && !activeOpt.hasAttribute('aria-disabled')) {
+            e.preventDefault();
+            this.#selectOption(activeOpt);
+          }
+          break;
+        }
+
+        case 'Tab':
+          if (isOpen) this.#close();
+          break;
+      }
+    }
+
+    // ── Virtual focus ──
+
+    #clearFocused() {
+      this._shadow.querySelectorAll('[role="option"][data-focused]')
+        .forEach(o => o.removeAttribute('data-focused'));
+    }
+
+    #setActive(option) {
+      const input = this.#getInput();
+      this.#clearFocused();
+      if (option && input) {
+        option.setAttribute('data-focused', '');
+        input.setAttribute('aria-activedescendant', option.id);
+        option.scrollIntoView({ block: 'nearest' });
+      }
+    }
+
+    #focusFirst() {
+      const opts = this.#getVisibleOptions();
+      if (opts.length) this.#setActive(opts[0]);
+    }
+
+    #focusLast() {
+      const opts = this.#getVisibleOptions();
+      if (opts.length) this.#setActive(opts[opts.length - 1]);
+    }
+
+    #focusNext() {
+      const opts = this.#getVisibleOptions();
+      if (!opts.length) return;
+      const input = this.#getInput();
+      const curId = input?.getAttribute('aria-activedescendant');
+      const curOpt = curId ? this._shadow.getElementById(curId) : null;
+      const idx = curOpt ? opts.indexOf(curOpt) : -1;
+      this.#setActive(opts[(idx + 1) % opts.length]);
+    }
+
+    #focusPrev() {
+      const opts = this.#getVisibleOptions();
+      if (!opts.length) return;
+      const input = this.#getInput();
+      const curId = input?.getAttribute('aria-activedescendant');
+      const curOpt = curId ? this._shadow.getElementById(curId) : null;
+      const idx = curOpt ? opts.indexOf(curOpt) : 0;
+      this.#setActive(opts[(idx - 1 + opts.length) % opts.length]);
+    }
+
+    // ── Option selection ──
+
+    #getOptionLabel(opt) {
+      const ls = opt.querySelector('.truncate');
+      if (ls) return ls.getAttribute('data-text') || ls.textContent;
+      return opt.textContent.trim();
+    }
+
+    #selectOption(option) {
+      const value = option.getAttribute('data-value') || '';
+      const mode = this.#getMode();
+      const input = this.#getInput();
+
+      if (mode === 'single') {
+        // Single: show label in input, close dropdown
+        if (input) input.value = this.#getOptionLabel(option);
+
+        // Update aria-selected
+        this._shadow.querySelectorAll('[role="option"]').forEach(o => {
+          const isThis = o === option;
+          o.setAttribute('aria-selected', String(isThis));
+          o.setAttribute('data-selected', String(isThis));
+          const check = o.querySelector('[data-check]');
+          if (check) {
+            if (isThis) check.classList.remove('hidden');
+            else check.classList.add('hidden');
+          }
+        });
+
+        // Sync host prop — single source of truth for WASM re-renders.
+        this._props.selected = value;
+
+        this.#skipOpen = true;
+        this.#close();
+        if (input) {
+          this._setFormValue(value);
+          input.focus();
+        }
+
+        this._emit('cx-change', { value });
+      } else {
+        // Multiple: toggle selection, keep open
+        const wasSelected = option.getAttribute('aria-selected') === 'true';
+        const nowSelected = !wasSelected;
+
+        option.setAttribute('aria-selected', String(nowSelected));
+        option.setAttribute('data-selected', String(nowSelected));
+        const check = option.querySelector('[data-check]');
+        if (check) {
+          if (nowSelected) check.classList.remove('hidden');
+          else check.classList.add('hidden');
+        }
+
+        // Clear input after selection in multi-mode
+        if (input) input.value = '';
+
+        // Rebuild chips
+        this.#rebuildChips();
+
+        // Collect all selected
+        const selected = [];
+        this._shadow.querySelectorAll('[role="option"][aria-selected="true"]')
+          .forEach(o => selected.push(o.getAttribute('data-value') || ''));
+
+        // Sync host prop — single source of truth for WASM re-renders.
+        this._props.selected = selected.join(',');
+
+        this._setFormValue(selected.join(','));
+        this._emit('cx-change', { value: selected });
+
+        // Re-filter with cleared input
+        if (input) this.#filter(input);
+        this.#clearFocused();
+        if (input) input.focus();
+      }
+    }
+
+    // ── Chip management (multi-mode) ──
+
+    #rebuildChips() {
+      const wrapper = this.#getWrapper();
+      if (!wrapper) return;
+
+      const chipContainer = wrapper.querySelector('.flex.flex-wrap');
+      if (!chipContainer) return;
+
+      const template = chipContainer.querySelector('[data-chip-template]');
+      if (!template) return;
+
+      const input = this.#getInput();
+
+      // Remove existing chips
+      chipContainer.querySelectorAll('[data-chip]:not([data-chip-template])').forEach(c => c.remove());
+
+      // Create chips for each selected option
+      this._shadow.querySelectorAll('[role="option"][aria-selected="true"]').forEach(o => {
+        const val = o.getAttribute('data-value') || '';
+        const label = this.#getOptionLabel(o);
+
+        const chip = template.cloneNode(true);
+        chip.removeAttribute('data-chip-template');
+        chip.style.display = '';
+        chip.setAttribute('data-chip', val);
+
+        const ls = chip.querySelector('.truncate');
+        if (ls) ls.textContent = label;
+
+        const btn = chip.querySelector('button');
+        if (btn) {
+          btn.setAttribute('data-chip-remove', val);
+          btn.setAttribute('aria-label', `Remove ${label}`);
+        }
+
+        if (input) chipContainer.insertBefore(chip, input);
+        else chipContainer.appendChild(chip);
+      });
+    }
+
+    #removeChip(value) {
+      if (!value) return;
+
+      // Deselect the option
+      this._shadow.querySelectorAll('[role="option"]').forEach(o => {
+        if (o.getAttribute('data-value') === value) {
+          o.setAttribute('aria-selected', 'false');
+          o.setAttribute('data-selected', 'false');
+          const check = o.querySelector('[data-check]');
+          if (check) check.classList.add('hidden');
+        }
+      });
+
+      this.#rebuildChips();
+
+      const selected = [];
+      this._shadow.querySelectorAll('[role="option"][aria-selected="true"]')
+        .forEach(o => selected.push(o.getAttribute('data-value') || ''));
+
+      // Sync host prop — single source of truth for WASM re-renders.
+      this._props.selected = selected.join(',');
+
+      this._setFormValue(selected.join(','));
+      this._emit('cx-change', { value: selected });
+
+      const input = this.#getInput();
+      if (input) input.focus();
+    }
+
+    #clearAll() {
+      const input = this.#getInput();
+      if (input) {
+        input.value = '';
+        input.focus();
+      }
+
+      // Deselect all options
+      this._shadow.querySelectorAll('[role="option"]').forEach(o => {
+        o.setAttribute('aria-selected', 'false');
+        o.setAttribute('data-selected', 'false');
+        const check = o.querySelector('[data-check]');
+        if (check) check.classList.add('hidden');
+      });
+
+      if (this.#getMode() === 'multiple') {
+        this.#rebuildChips();
+      }
+
+      // Sync host prop — single source of truth for WASM re-renders.
+      this._props.selected = '';
+
+      this._setFormValue('');
+      this._emit('cx-input', { value: '' });
+      this._emit('cx-change', { value: this.#getMode() === 'multiple' ? [] : '' });
+
+      if (input) this.#filter(input);
+    }
+
+    // ── Public imperative API ──
+    open() { this.#open(); }
+    close() { this.#close(); }
+    clear() { this.#clearAll(); }
+    focus() { const el = this._shadow.querySelector('input[role="combobox"]'); if (el) el.focus(); else super.focus(); }
+
+    // ── Render ──
+
+    _doRender() {
+      try {
+        const wasOpen = this.#isOpen();
+        const activeId = this.#getInput()?.getAttribute('aria-activedescendant');
+
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Sync controlled value
+        const input = this._shadow.querySelector('input, textarea');
+        if (input) {
+          if ('query' in this._props && this._props.query !== undefined) {
+            input.value = this._props.query;
+          } else if ('value' in this._props) {
+            input.value = this._props.value;
+          }
+          this._setFormValue(input.value || '');
+        }
+
+        // Restore open state
+        if (wasOpen) {
+          this.#open();
+          if (activeId) {
+            const opt = this._shadow.getElementById(activeId);
+            if (opt) this.#setActive(opt);
+          }
+        }
+      } catch (e) {
+        console.error('[cx-autocomplete]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-autocomplete', CxAutocomplete);
+  return CxAutocomplete;
+}

package/src/elements/avatar.d.ts

@@ -0,0 +1,18 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/avatar.rs
+
+export interface CxAvatarAttributes {
+    id?: string;
+    label?: string;
+    shape?: 'circle' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    image?: string;
+    initials?: string;
+    clickable?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-avatar': HTMLElement & CxAvatarAttributes;
+  }
+}