@colletdev/core 0.1.3

package/src/elements/split_button.js

@@ -0,0 +1,281 @@
+// Custom behavior for <cx-split-button> — primary click, dropdown toggle, keyboard nav.
+//
+// The Rust component renders:
+//   <div role="group" aria-label="..."> — button group
+//     <button part="primary"> — primary action
+//     <button part="trigger" aria-haspopup="menu" aria-expanded="false"
+//             data-floating-trigger data-floating-target="{menu_id}"> — dropdown toggle
+//     <div id="{menu_id}" role="menu" data-menu data-floating> — dropdown menu
+//       <button role="menuitem" data-action-id="{id}"> — each entry
+//       <div role="separator"> — dividers
+//
+// This Custom Element wires up:
+//   - Click primary → cx-click event
+//   - Click trigger → toggle dropdown menu
+//   - Click menu item → cx-action event + close
+//   - Click outside / focus exit → close
+//   - Keyboard: Enter/Space on trigger, ArrowDown opens, arrow nav in menu, Escape closes
+//
+// Source: crates/wasm-api/src/split_button.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      ':host { display: inline-flex; }',
+      // Dropdown uses position:fixed (set by JS) to escape scroll container clipping.
+      '[data-floating] {',
+      '  z-index: 50;',
+      '}',
+      // Hover effect for menu items
+      '[role="menuitem"]:not([aria-disabled="true"]):hover {',
+      '  background-color: var(--color-secondary);',
+      '  cursor: pointer;',
+      '}',
+      // Focus indicator
+      '[role="menuitem"]:focus-visible {',
+      '  background-color: var(--color-secondary);',
+      '  outline: none;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+export function defineCxSplitButton(wasmFn, baseClass) {
+  class CxSplitButton extends baseClass {
+    static observedAttributes = ['id', 'label', 'entries', 'variant', 'intent', 'shape', 'size', 'icon-leading', 'disabled', 'primary-disabled', 'trigger-disabled', 'trigger-label'];
+    static _booleanAttrs = new Set(['disabled', 'primary-disabled', 'trigger-disabled']);
+
+    #outsideClick = 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) => {
+          // Trigger button → toggle dropdown
+          const trigger = e.target.closest('[data-floating-trigger]');
+          if (trigger && !trigger.disabled && !trigger.hasAttribute('aria-disabled')) {
+            e.preventDefault();
+            this.#toggle();
+            return;
+          }
+
+          // Primary button → emit cx-click
+          const primary = e.target.closest('[part="primary"]');
+          if (primary && !primary.disabled) {
+            this._emit('cx-click', { originalEvent: e });
+            return;
+          }
+
+          // Menu item → emit cx-action, close
+          const menuitem = e.target.closest('[role="menuitem"]');
+          if (menuitem && !menuitem.hasAttribute('aria-disabled')) {
+            this._emit('cx-action', {
+              id: menuitem.getAttribute('data-action-id') || menuitem.id || '',
+              label: menuitem.textContent.trim()
+            });
+            this.#close();
+          }
+        });
+
+        // ── 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 = this._shadow.activeElement || document.activeElement;
+              if (!this.contains(active) && !this._shadow.contains(active) && active !== this) {
+                this.#close();
+              }
+            }
+          }, 0);
+        });
+      } // 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('[data-floating-trigger]');
+    }
+
+    #getMenu() {
+      return this._shadow.querySelector('[role="menu"]');
+    }
+
+    #getItems() {
+      return Array.from(
+        this._shadow.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+      );
+    }
+
+    // ── Menu state ──
+
+    #isOpen() {
+      const menu = this.#getMenu();
+      return menu ? menu.hasAttribute('data-open') : false;
+    }
+
+    #open() {
+      const trigger = this.#getTrigger();
+      const menu = this.#getMenu();
+      if (!trigger || !menu || this.#isOpen()) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      this._positionFloatingFixed(trigger, menu, { matchWidth: true });
+
+      trigger.setAttribute('aria-expanded', 'true');
+      menu.setAttribute('data-open', '');
+      menu.classList.remove('hidden');
+      menu.style.display = 'block';
+      menu.style.pointerEvents = 'auto';
+      menu.style.opacity = '1';
+
+      // Focus first menu item
+      requestAnimationFrame(() => {
+        const items = this.#getItems();
+        if (items.length) items[0].focus();
+      });
+    }
+
+    #close() {
+      const trigger = this.#getTrigger();
+      const menu = this.#getMenu();
+      if (!trigger || !menu) return;
+
+      trigger.setAttribute('aria-expanded', 'false');
+      menu.removeAttribute('data-open');
+      menu.classList.add('hidden');
+      menu.style.display = '';
+      menu.style.pointerEvents = '';
+      menu.style.opacity = '';
+      this._resetFloatingFixed(menu);
+      trigger.focus();
+    }
+
+    #toggle() {
+      if (this.#isOpen()) this.#close();
+      else this.#open();
+    }
+
+    // ── Keyboard navigation ──
+
+    #handleKey(e) {
+      // Trigger: Enter/Space toggle
+      const trigger = e.target.closest('[data-floating-trigger]');
+      if (trigger) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.#toggle();
+          return;
+        }
+        // ArrowDown on trigger opens menu
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          if (!this.#isOpen()) this.#open();
+          return;
+        }
+      }
+
+      // Menu item navigation
+      const menuitem = e.target.closest('[role="menuitem"]');
+      if (!menuitem) return;
+
+      const items = this.#getItems();
+      const idx = items.indexOf(menuitem);
+      if (idx === -1) return;
+
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        const ni = e.key === 'ArrowDown'
+          ? (idx + 1) % items.length
+          : (idx - 1 + items.length) % items.length;
+        items[ni].focus();
+        return;
+      }
+
+      if (e.key === 'Home') {
+        e.preventDefault();
+        if (items.length) items[0].focus();
+        return;
+      }
+
+      if (e.key === 'End') {
+        e.preventDefault();
+        if (items.length) items[items.length - 1].focus();
+        return;
+      }
+
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (!menuitem.hasAttribute('aria-disabled')) menuitem.click();
+        return;
+      }
+
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.#close();
+        return;
+      }
+
+      if (e.key === 'Tab') {
+        this.#close();
+      }
+    }
+
+    // ── Public imperative API ──
+    open() { this.#open(); }
+    close() { this.#close(); }
+
+    _doRender() {
+      try {
+        const wasOpen = this.#isOpen();
+
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        if (wasOpen) this.#open();
+      } catch (e) {
+        console.error('[cx-split-button]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-split-button', CxSplitButton);
+  return CxSplitButton;
+}

package/src/elements/stepper.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/stepper.rs
+
+export interface CxStepperAttributes {
+    id?: string;
+    label?: string;
+    steps?: string;
+    current?: number;
+    variant?: 'outline' | 'filled' | 'ghost';
+    shape?: 'sharp' | 'rounded';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    linear?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-stepper': HTMLElement & CxStepperAttributes;
+  }
+}

package/src/elements/stepper.js

@@ -0,0 +1,31 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/stepper.rs
+
+export function defineCxStepper(wasmFn, baseClass) {
+  class CxStepper extends baseClass {
+    static observedAttributes = ['id', 'label', 'steps', 'current', 'variant', 'shape', 'orientation', 'size', 'linear'];
+    static _booleanAttrs = new Set(['linear']);
+    static _numericAttrs = new Set(['current']);
+    static _focusable = false;
+    static _hostDisplay = 'block';
+
+  set current(v) { this._setProp('current', v); }
+  get current() { return this._props.current; }
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-stepper]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-stepper', CxStepper);
+  return CxStepper;
+}

package/src/elements/switch.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/switch.rs
+
+export interface CxSwitchAttributes {
+    id?: string;
+    label?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    error?: string;
+    description?: string;
+    unlabeled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-switch': HTMLElement & CxSwitchAttributes;
+  }
+}

package/src/elements/switch.js

@@ -0,0 +1,129 @@
+// Custom behavior for <cx-switch> — toggle with CSS transition animation.
+// Source: crates/wasm-api/src/switch.rs
+
+// Size → thumb translate distance mapping (mirrors Rust switch/styles.rs).
+// Values match Tailwind's spacing scale: translate-x-N = N * 0.25rem.
+const THUMB_TRANSLATE = {
+  xs: '0.75rem',   // translate-x-3
+  sm: '0.875rem',  // translate-x-3.5
+  md: '1rem',      // translate-x-4
+  lg: '1.25rem',   // translate-x-5
+  xl: '1.25rem',   // translate-x-5
+};
+
+export function defineCxSwitch(wasmFn, baseClass) {
+  class CxSwitch extends baseClass {
+    static observedAttributes = ['id', 'label', 'shape', 'size', 'checked', 'disabled', 'required', 'helper-text', 'error', 'description', 'unlabeled'];
+    static _booleanAttrs = new Set(['checked', 'disabled', 'required', 'unlabeled']);
+    static _hostDisplay = 'inline-flex';
+
+    // Thumb translate distance for current size.
+    #thumbDistance = THUMB_TRANSLATE.md;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Switch toggle: manipulate DOM directly (not re-render) so CSS
+        // transitions can animate the thumb slide and track color change.
+        shadow.addEventListener('click', (e) => {
+          const btn = e.target.closest('button[role="switch"]');
+          if (!btn || this._props.disabled) return;
+
+          const isChecked = btn.getAttribute('aria-checked') === 'true';
+          const newChecked = !isChecked;
+
+          // Toggle ARIA state
+          btn.setAttribute('aria-checked', String(newChecked));
+
+          // Toggle track background color
+          btn.style.backgroundColor = newChecked
+            ? 'var(--color-primary)' : 'var(--color-secondary)';
+
+          // Toggle thumb position via inline translate.
+          // Using style.translate instead of class toggle ensures both states
+          // have explicit values, so the CSS transition always animates.
+          const thumb = btn.querySelector('span[aria-hidden="true"]');
+          if (thumb) {
+            thumb.style.translate = newChecked ? `${this.#thumbDistance} 0` : '0 0';
+          }
+
+          // Toggle hidden input
+          const input = shadow.querySelector('input[type="checkbox"]');
+          if (input) input.checked = newChecked;
+
+          // Sync props (for next full re-render from attribute change)
+          this._props.checked = newChecked;
+
+          // Form participation
+          this._setFormValue(newChecked ? 'on' : '');
+          this._emit('cx-input', { checked: newChecked });
+          this._emit('cx-change', { checked: newChecked });
+        });
+
+        // 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();
+    }
+
+    // Override: update thumb distance when size changes.
+    attributeChangedCallback(name, old, value) {
+      if (name === 'size') {
+        this.#thumbDistance = THUMB_TRANSLATE[value] || THUMB_TRANSLATE.md;
+      }
+      super.attributeChangedCallback(name, old, value);
+    }
+
+    // ── Public imperative API ──
+    focus() { const el = this._shadow.querySelector('button[role="switch"]'); if (el) el.focus(); else super.focus(); }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Set initial thumb translate so CSS transition has explicit
+        // start/end values. WASM renders checked state via Tailwind
+        // classes, but we need inline styles for the transition to work.
+        const thumb = this._shadow.querySelector(
+          'button[role="switch"] > span[aria-hidden="true"]'
+        );
+        if (thumb) {
+          const isChecked = this._props.checked;
+          // Remove any Tailwind translate class (it would conflict with inline style)
+          for (const cls of [...thumb.classList]) {
+            if (cls.startsWith('translate-x-')) {
+              thumb.classList.remove(cls);
+            }
+          }
+          // Set explicit translate for transition animation
+          thumb.style.translate = isChecked ? `${this.#thumbDistance} 0` : '0 0';
+        }
+
+        // Sync form value
+        const input = this._shadow.querySelector('input[type="checkbox"]');
+        if (input) this._setFormValue(input.checked ? 'on' : '');
+      } catch (e) {
+        console.error('[cx-switch]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-switch', CxSwitch);
+  return CxSwitch;
+}

package/src/elements/table.d.ts

@@ -0,0 +1,29 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/table.rs
+
+export interface CxTableAttributes {
+    id?: string;
+    caption: string;
+    columns?: string;
+    rows?: string;
+    variant?: 'plain' | 'striped' | 'bordered';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selectable?: string;
+    selected?: string;
+    sorts?: string;
+    pagination?: string;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    footer?: string;
+    emptyState?: string;
+    columnOrder?: string;
+    disabled?: boolean;
+    loading?: number;
+    error?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-table': HTMLElement & CxTableAttributes;
+  }
+}