@colletdev/core 0.1.3

package/src/elements/search_bar.d.ts

@@ -0,0 +1,27 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/search_bar.rs
+
+export interface CxSearchBarAttributes {
+    id?: string;
+    placeholder?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    name?: string;
+    value?: string;
+    debounceMs?: number;
+    loading?: boolean;
+    shortcut?: string;
+    expandable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    controls?: string;
+    shimmer?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-search-bar': HTMLElement & CxSearchBarAttributes;
+  }
+}

package/src/elements/search_bar.js

@@ -0,0 +1,98 @@
+// Custom behavior for <cx-search-bar> — shimmer, keyboard shortcuts, clear, debounce.
+// Hand-authored to support focus shimmer animation with 10s cooldown.
+// Source: crates/wasm-api/src/search_bar.rs
+
+export function defineCxSearchBar(wasmFn, baseClass) {
+  class CxSearchBar extends baseClass {
+    static observedAttributes = ['id', 'placeholder', 'label', 'variant', 'shape', 'size', 'name', 'value', 'debounce-ms', 'loading', 'shortcut', 'expandable', 'disabled', 'readonly', 'controls', 'shimmer'];
+    static _booleanAttrs = new Set(['loading', 'expandable', 'disabled', 'readonly', 'shimmer']);
+    static _numericAttrs = new Set(['debounce-ms']);
+    static _hostDisplay = 'block';
+
+    #lastShimmer = 0;
+    #shimmerCooldown = 10_000;
+
+    set debounce_ms(v) { this._setProp('debounce_ms', v); }
+    get debounce_ms() { return this._props.debounce_ms; }
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Forward focus events from inner interactive elements
+        shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+
+          // ── Focus shimmer (one-shot, 10s cooldown, reduced-motion aware) ──
+          const shimmerEl = shadow.querySelector('[data-search-shimmer]');
+          if (!shimmerEl) return;
+          const shimmerText = shimmerEl.querySelector('span:last-child');
+          if (!shimmerText) return;
+
+          const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+          if (prefersReduced.matches) return;
+
+          const now = Date.now();
+          if (now - this.#lastShimmer < this.#shimmerCooldown) return;
+          this.#lastShimmer = now;
+          shimmerText.classList.add('cx-search-shimmer-text');
+        });
+
+        shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Remove shimmer class after animation completes
+        shadow.addEventListener('animationend', (e) => {
+          if (e.animationName === 'cx-search-shimmer') {
+            e.target.classList.remove('cx-search-shimmer-text');
+          }
+        });
+
+        // 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 });
+        });
+
+        // Hide shimmer overlay when input has value
+        shadow.addEventListener('input', (e) => {
+          if (e.target.tagName === 'INPUT') {
+            const shimmerEl = shadow.querySelector('[data-search-shimmer]');
+            if (shimmerEl) {
+              shimmerEl.style.display = e.target.value.length > 0 ? 'none' : '';
+            }
+            this._emit('cx-input', { value: e.target.value });
+          }
+        });
+        shadow.addEventListener('change', (e) => {
+          if (e.target.tagName === 'INPUT') {
+            this._emit('cx-change', { value: e.target.value });
+          }
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    // ── Public imperative API ──
+    focus() {
+      const el = this._shadow.querySelector('input[type="search"]');
+      if (el) el.focus(); else super.focus();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-search-bar]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-search-bar', CxSearchBar);
+  return CxSearchBar;
+}

package/src/elements/select.d.ts

@@ -0,0 +1,26 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/select.rs
+
+export interface CxSelectAttributes {
+    id?: string;
+    label?: string;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    mode?: 'single' | 'multiple';
+    selected?: string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    items?: string;
+    groups?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-select': HTMLElement & CxSelectAttributes;
+  }
+}

package/src/elements/select.js

@@ -0,0 +1,485 @@
+// Custom behavior for <cx-select> — dropdown toggle, option selection, keyboard nav.
+//
+// The Rust component renders a WAI-ARIA APG Select-Only Combobox:
+//   <button role="combobox" data-floating-trigger> — the trigger
+//   <div data-floating class="hidden data-[open]:block"> — the dropdown
+//     <div role="listbox"> — the option list
+//       <div role="option" data-value="..."> — each option
+//
+// This Custom Element wires up all interactive behavior:
+//   - Click/keyboard on trigger to toggle dropdown
+//   - Option selection with display text + form value sync
+//   - Keyboard navigation per WAI-ARIA APG Select-Only Combobox
+//   - Click-outside + focus-exit to close
+//   - Chevron rotation animation via aria-expanded CSS
+//
+// Source: crates/wasm-api/src/select.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      // Dropdown uses position:fixed (set by JS) to escape scroll container
+      // clipping. The sheet provides base z-index and scroll behavior only.
+      '[data-floating] {',
+      '  z-index: 50;',
+      '  max-height: 15rem;',
+      '  overflow-y: auto;',
+      '}',
+      // Chevron rotation follows aria-expanded (animated via transition-transform on span)
+      'button[aria-expanded="true"] > span[aria-hidden="true"] {',
+      '  transform: rotate(180deg);',
+      '}',
+      // Visual focus indicator for keyboard-navigated options
+      '[role="option"][data-focused] {',
+      '  background-color: var(--color-secondary);',
+      '}',
+      // Hover effect for options (only non-disabled)
+      '[role="option"]:not([aria-disabled="true"]):hover {',
+      '  background-color: var(--color-secondary);',
+      '  cursor: pointer;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+export function defineCxSelect(wasmFn, baseClass) {
+  class CxSelect extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'shape', 'size', 'mode', 'selected', 'placeholder', 'helper-text', 'error', 'disabled', 'required', 'name', 'items', 'groups'];
+    static _booleanAttrs = new Set(['disabled', 'required']);
+
+    #outsideClick = null;
+    #focusOut = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Add positioning + visual feedback styles
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // ── Click handler (delegated on shadow root — survives re-renders) ──
+        shadow.addEventListener('click', (e) => {
+          // Option click → select it
+          const option = e.target.closest('[role="option"]');
+          if (option && !option.hasAttribute('aria-disabled')) {
+            this.#selectOption(option);
+            return;
+          }
+
+          // Trigger click → toggle dropdown
+          const trigger = this.#getTrigger();
+          if (trigger && trigger.contains(e.target) && !this._props.disabled) {
+            this.#toggle();
+          }
+        });
+
+        // ── Keyboard handler ──
+        shadow.addEventListener('keydown', (e) => this.#handleKey(e));
+
+        // ── Click outside → close ──
+        // mousedown fires before the click that opened, avoiding immediate 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 ──
+        // When focus leaves the component entirely, close the dropdown.
+        // setTimeout lets the new focus target settle before checking.
+        // Must check both light DOM and shadow DOM — Node.contains() doesn't cross shadow boundaries.
+        this.#focusOut = () => {
+          setTimeout(() => {
+            if (this.#isOpen()) {
+              const active = this._shadow.activeElement || document.activeElement;
+              if (!this.contains(active) && !this._shadow.contains(active) && active !== this) {
+                this.#close();
+              }
+            }
+          }, 0);
+        };
+        shadow.addEventListener('focusout', this.#focusOut);
+
+        // 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;
+      }
+      super.disconnectedCallback();
+    }
+
+    // ── DOM accessors ──
+
+    #getTrigger() {
+      return this._shadow.querySelector('button[role="combobox"]');
+    }
+
+    #getDropdown() {
+      return this._shadow.querySelector('[data-floating]');
+    }
+
+    #getVisibleOptions() {
+      return Array.from(
+        this._shadow.querySelectorAll(
+          '[role="option"]:not([aria-disabled="true"]):not([hidden])'
+        )
+      );
+    }
+
+    // ── Dropdown state ──
+
+    #isOpen() {
+      const dd = this.#getDropdown();
+      return dd ? dd.hasAttribute('data-open') : false;
+    }
+
+    #open() {
+      const trigger = this.#getTrigger();
+      const dd = this.#getDropdown();
+      if (!trigger || !dd || this.#isOpen()) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      this._positionFloatingFixed(trigger, dd, { matchWidth: true });
+
+      dd.setAttribute('data-open', '');
+      dd.classList.remove('hidden');
+      dd.style.display = 'block';
+      dd.style.pointerEvents = 'auto';
+      dd.style.opacity = '1';
+      trigger.setAttribute('aria-expanded', 'true');
+    }
+
+    #close() {
+      const trigger = this.#getTrigger();
+      const dd = this.#getDropdown();
+      if (!trigger || !dd) return;
+
+      dd.removeAttribute('data-open');
+      dd.classList.add('hidden');
+      dd.style.display = '';
+      dd.style.pointerEvents = '';
+      dd.style.opacity = '';
+      this._resetFloatingFixed(dd);
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.removeAttribute('aria-activedescendant');
+      this.#clearFocused();
+    }
+
+    #toggle() {
+      if (this.#isOpen()) {
+        this.#close();
+      } else {
+        this.#open();
+        // Highlight currently selected option (if any) on open
+        const selected = this._shadow.querySelector(
+          '[role="option"][aria-selected="true"]:not([aria-disabled="true"])'
+        );
+        if (selected) {
+          this.#setActive(selected);
+        }
+      }
+    }
+
+    // ── Keyboard navigation (WAI-ARIA APG Select-Only Combobox) ──
+
+    #handleKey(e) {
+      const trigger = this.#getTrigger();
+      if (!trigger || this._props.disabled) return;
+
+      // Only handle keys when trigger has focus
+      if (e.target !== trigger && !trigger.contains(e.target)) return;
+
+      const isOpen = this.#isOpen();
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (isOpen) {
+            const active = this.#getActiveOption();
+            if (active) {
+              this.#selectOption(active);
+            } else {
+              this.#close();
+            }
+          } else {
+            this.#open();
+            this.#focusSelectedOrFirst();
+          }
+          break;
+
+        case 'ArrowDown':
+          e.preventDefault();
+          if (!isOpen) {
+            this.#open();
+            this.#focusSelectedOrFirst();
+          } else {
+            this.#focusNext();
+          }
+          break;
+
+        case 'ArrowUp':
+          e.preventDefault();
+          if (!isOpen) {
+            this.#open();
+            this.#focusLast();
+          } else {
+            this.#focusPrev();
+          }
+          break;
+
+        case 'Home':
+          if (isOpen) {
+            e.preventDefault();
+            this.#focusFirst();
+          }
+          break;
+
+        case 'End':
+          if (isOpen) {
+            e.preventDefault();
+            this.#focusLast();
+          }
+          break;
+
+        case 'Escape':
+          if (isOpen) {
+            e.preventDefault();
+            this.#close();
+            trigger.focus();
+          }
+          break;
+
+        case 'Tab':
+          // Close on tab, but let default tab behavior proceed
+          if (isOpen) this.#close();
+          break;
+      }
+    }
+
+    // ── Virtual focus management (aria-activedescendant) ──
+    // DOM focus stays on the trigger button. Visual highlighting
+    // and screen reader focus use aria-activedescendant + data-focused.
+
+    #clearFocused() {
+      this._shadow.querySelectorAll('[role="option"][data-focused]')
+        .forEach(o => o.removeAttribute('data-focused'));
+    }
+
+    #setActive(option) {
+      const trigger = this.#getTrigger();
+      this.#clearFocused();
+      if (option && trigger) {
+        option.setAttribute('data-focused', '');
+        trigger.setAttribute('aria-activedescendant', option.id);
+        option.scrollIntoView({ block: 'nearest' });
+      }
+    }
+
+    #getActiveOption() {
+      const trigger = this.#getTrigger();
+      if (!trigger) return null;
+      const id = trigger.getAttribute('aria-activedescendant');
+      return id ? this._shadow.getElementById(id) : null;
+    }
+
+    #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]);
+    }
+
+    #focusSelectedOrFirst() {
+      const selected = this._shadow.querySelector(
+        '[role="option"][aria-selected="true"]:not([aria-disabled="true"])'
+      );
+      if (selected) {
+        this.#setActive(selected);
+      } else {
+        this.#focusFirst();
+      }
+    }
+
+    #focusNext() {
+      const opts = this.#getVisibleOptions();
+      if (!opts.length) return;
+      const active = this.#getActiveOption();
+      const idx = active ? opts.indexOf(active) : -1;
+      this.#setActive(opts[(idx + 1) % opts.length]);
+    }
+
+    #focusPrev() {
+      const opts = this.#getVisibleOptions();
+      if (!opts.length) return;
+      const active = this.#getActiveOption();
+      const idx = active ? opts.indexOf(active) : 0;
+      this.#setActive(opts[(idx - 1 + opts.length) % opts.length]);
+    }
+
+    // ── Option selection ──
+
+    #selectOption(option) {
+      const value = option.getAttribute('data-value') || '';
+      const mode = this._props.mode || 'single';
+
+      if (mode === 'single') {
+        // Single select: set this as the only selected option
+        this._props.selected = value;
+
+        // Update display text with the option's label
+        const labelSpan = option.querySelector('.truncate');
+        const displayText = labelSpan ? labelSpan.textContent : value;
+        this.#updateDisplayText(displayText, false);
+
+        // Update aria-selected + check indicators on all options
+        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');
+          }
+        });
+
+        // Close dropdown, return focus to trigger
+        this.#close();
+        this.#getTrigger()?.focus();
+
+        // Emit events + form value sync
+        this._setFormValue(value);
+        this._emit('cx-input', { value });
+        this._emit('cx-change', { value });
+      } else {
+        // Multiple: toggle this option's selection
+        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');
+        }
+
+        // Collect all currently selected values
+        const selected = [];
+        const labels = [];
+        this._shadow.querySelectorAll('[role="option"][aria-selected="true"]')
+          .forEach(o => {
+            selected.push(o.getAttribute('data-value') || '');
+            const l = o.querySelector('.truncate');
+            labels.push(l ? l.textContent : (o.getAttribute('data-value') || ''));
+          });
+
+        // Update display text
+        if (labels.length === 0) {
+          this.#updateDisplayText(this.#getPlaceholder(), true);
+        } else if (labels.length <= 3) {
+          this.#updateDisplayText(labels.join(', '), false);
+        } else {
+          this.#updateDisplayText(`${labels.length} items selected`, false);
+        }
+
+        // Keep dropdown open for more selections
+        this._setFormValue(selected.join(','));
+        this._emit('cx-change', { value: selected });
+      }
+    }
+
+    #updateDisplayText(text, isPlaceholder) {
+      const trigger = this.#getTrigger();
+      if (!trigger) return;
+      // The display text is the first span child with truncate class
+      const display = trigger.querySelector('span.truncate');
+      if (display) {
+        display.textContent = text;
+        display.style.color = isPlaceholder ? 'var(--color-text-muted)' : '';
+      }
+    }
+
+    #getPlaceholder() {
+      const trigger = this.#getTrigger();
+      if (!trigger) return '';
+      const display = trigger.querySelector('span.truncate');
+      return display?.getAttribute('data-placeholder') || '';
+    }
+
+    // ── Public imperative API ──
+    open() { this.#open(); }
+    close() { this.#close(); }
+    focus() { const el = this._shadow.querySelector('button[role="combobox"]'); if (el) el.focus(); else super.focus(); }
+
+    // ── Render ──
+
+    _doRender() {
+      try {
+        // Preserve open state across re-renders (React prop changes
+        // trigger _doRender which replaces shadow DOM via innerHTML,
+        // losing the data-open attribute on the dropdown).
+        const wasOpen = this.#isOpen();
+        const activeId = this.#getTrigger()?.getAttribute('aria-activedescendant');
+
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Ensure positioning styles survive re-render
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Restore open state if dropdown was open before re-render
+        if (wasOpen) {
+          this.#open();
+          if (activeId) {
+            const opt = this._shadow.getElementById(activeId);
+            if (opt) this.#setActive(opt);
+          }
+        }
+
+        // Sync form value
+        const selected = this._props.selected;
+        if (selected) this._setFormValue(String(selected));
+      } catch (e) {
+        console.error('[cx-select]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-select', CxSelect);
+  return CxSelect;
+}

package/src/elements/sidebar.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/sidebar.rs
+
+export interface CxSidebarAttributes {
+    id?: string;
+    label?: string;
+    header?: string;
+    footer?: string;
+    groups?: string;
+    separatorsAfter?: string;
+    side?: 'left' | 'right';
+    state?: 'expanded' | 'narrow' | 'hidden';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-sidebar': HTMLElement & CxSidebarAttributes;
+  }
+}