@colletdev/core 0.1.3

package/src/elements/speed_dial.js

@@ -0,0 +1,370 @@
+// Custom behavior for <cx-speed-dial> — FAB trigger, icon morph, menu toggle, keyboard nav.
+//
+// The Rust component renders:
+//   <div data-speed-dial="{id}"> — container with directional flex
+//     <div data-speed-dial-backdrop> — optional overlay (hidden)
+//     <ul role="menu" data-speed-dial-menu> — action list (hidden)
+//       <li role="menuitem" data-action-id="{id}"> — each action
+//     <button data-speed-dial-trigger> — FAB button
+//       <span data-speed-dial-icon> — main icon (rotates 45deg on open)
+//       <span data-speed-dial-close-icon hidden> — swap icon (optional)
+//
+// This Custom Element wires up:
+//   - Click FAB to toggle menu open/close
+//   - Icon morph (45deg rotation or icon swap)
+//   - Backdrop show/hide
+//   - Staggered action reveal animation
+//   - Keyboard navigation (ArrowUp/Down, Home/End, Enter/Space, Escape)
+//   - Grace area timer (prevents accidental close on mouseleave)
+//   - cx-change with { open: bool }, cx-action with { id, label }
+//
+// Source: crates/wasm-api/src/speed_dial.rs
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      // Anchor for absolute positioning of menu
+      ':host { position: relative; display: inline-flex; }',
+      // Menu items start hidden for stagger animation
+      '[role="menuitem"] {',
+      '  transition: opacity 150ms ease-out, transform 150ms ease-out;',
+      '}',
+      // Backdrop covers viewport
+      '[data-speed-dial-backdrop] {',
+      '  transition: opacity 200ms ease-out;',
+      '}',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+const GRACE_MS = 300;
+
+export function defineCxSpeedDial(wasmFn, baseClass) {
+  class CxSpeedDial extends baseClass {
+    static observedAttributes = ['id', 'icon', 'aria-label', 'close-icon', 'actions', 'variant', 'shape', 'size', 'direction', 'backdrop', 'tooltips', 'disabled'];
+    static _booleanAttrs = new Set(['backdrop', 'tooltips', 'disabled']);
+
+    #graceTimer = null;
+    #outsideClick = null;
+
+    connectedCallback() {
+      const shadow = this._shadow;
+
+      const sheet = getSheet();
+      if (!shadow.adoptedStyleSheets.includes(sheet)) {
+        shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+      }
+
+      if (!this._isInitialized) {
+        this._markInitialized();
+
+      // ── Click handler ──
+      shadow.addEventListener('click', (e) => {
+        // Backdrop click → close
+        if (e.target.closest('[data-speed-dial-backdrop]')) {
+          this.#close();
+          return;
+        }
+
+        // Trigger click → toggle
+        const trigger = e.target.closest('[data-speed-dial-trigger]');
+        if (trigger && !this._props.disabled) {
+          e.preventDefault();
+          this.#toggle();
+          return;
+        }
+
+        // Action item click → emit cx-action, close
+        const action = e.target.closest('[role="menuitem"]');
+        if (action && !action.hasAttribute('aria-disabled')) {
+          this._emit('cx-action', {
+            id: action.getAttribute('data-action-id') || action.id || '',
+            label: action.getAttribute('aria-label') || action.textContent.trim()
+          });
+          this.#close();
+        }
+      });
+
+      // ── Keyboard handler ──
+      shadow.addEventListener('keydown', (e) => this.#handleKey(e));
+
+      // ── Grace area: mouseleave / mouseenter ──
+      shadow.addEventListener('mouseleave', () => {
+        if (this.#isOpen()) {
+          this.#graceTimer = setTimeout(() => this.#close(), GRACE_MS);
+        }
+      });
+
+      shadow.addEventListener('mouseenter', () => {
+        if (this.#graceTimer) {
+          clearTimeout(this.#graceTimer);
+          this.#graceTimer = null;
+        }
+      });
+
+      // ── 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);
+      } // end _isInitialized guard
+
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      if (this.#outsideClick) {
+        document.removeEventListener('mousedown', this.#outsideClick);
+        this.#outsideClick = null;
+      }
+      if (this.#graceTimer) {
+        clearTimeout(this.#graceTimer);
+        this.#graceTimer = null;
+      }
+      super.disconnectedCallback();
+    }
+
+    // ── DOM accessors ──
+
+    #getContainer() {
+      return this._shadow.querySelector('[data-speed-dial]');
+    }
+
+    #getTrigger() {
+      return this._shadow.querySelector('[data-speed-dial-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 trigger = this.#getTrigger();
+      return trigger ? trigger.getAttribute('aria-expanded') === 'true' : false;
+    }
+
+    #open() {
+      const trigger = this.#getTrigger();
+      const menu = this.#getMenu();
+      if (!trigger || !menu || this.#isOpen()) return;
+
+      // Clear grace timer — imperative open() must not be undone by a pending close
+      if (this.#graceTimer) {
+        clearTimeout(this.#graceTimer);
+        this.#graceTimer = null;
+      }
+
+      trigger.setAttribute('aria-expanded', 'true');
+      menu.setAttribute('data-open', '');
+      menu.classList.remove('hidden');
+      menu.style.display = 'flex';
+      menu.style.pointerEvents = 'auto';
+      menu.style.opacity = '1';
+
+      // Icon morph: rotate first icon span 45deg (plus → X)
+      const iconSpans = trigger.querySelectorAll('span[aria-hidden="true"]');
+      const iconEl = iconSpans.length ? iconSpans[0] : null;
+      if (iconEl) iconEl.style.transform = 'rotate(45deg)';
+
+      // Icon swap variant
+      const closeIcon = trigger.querySelector('[data-speed-dial-close-icon]');
+      if (closeIcon && iconEl) {
+        iconEl.classList.add('hidden');
+        closeIcon.classList.remove('hidden');
+        iconEl.style.transform = '';
+      }
+
+      // Backdrop
+      const backdrop = this._shadow.querySelector('[data-speed-dial-backdrop]');
+      if (backdrop) {
+        backdrop.setAttribute('data-open', '');
+        requestAnimationFrame(() => { backdrop.style.opacity = '1'; });
+      }
+
+      // Staggered action reveal
+      const actions = menu.querySelectorAll('[role="menuitem"]');
+      actions.forEach((a, i) => {
+        a.style.transitionDelay = `${i * 50}ms`;
+        a.style.opacity = '1';
+        a.style.transform = 'scale(1)';
+      });
+
+      this._emit('cx-change', { open: true });
+
+      // Focus first 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');
+
+      // Icon morph reset
+      const iconSpans = trigger.querySelectorAll('span[aria-hidden="true"]');
+      const iconEl = iconSpans.length ? iconSpans[0] : null;
+      if (iconEl) iconEl.style.transform = '';
+
+      // Icon swap reset
+      const closeIcon = trigger.querySelector('[data-speed-dial-close-icon]');
+      if (closeIcon && iconEl) {
+        iconEl.classList.remove('hidden');
+        closeIcon.classList.add('hidden');
+      }
+
+      // Backdrop
+      const backdrop = this._shadow.querySelector('[data-speed-dial-backdrop]');
+      if (backdrop) {
+        backdrop.style.opacity = '0';
+        setTimeout(() => { backdrop.removeAttribute('data-open'); }, 200);
+      }
+
+      // Collapse actions
+      const actions = menu.querySelectorAll('[role="menuitem"]');
+      actions.forEach(a => {
+        a.style.transitionDelay = '0ms';
+        a.style.opacity = '0';
+        a.style.transform = 'scale(0.3)';
+      });
+
+      menu.removeAttribute('data-open');
+      menu.classList.add('hidden');
+      menu.style.display = '';
+      menu.style.pointerEvents = '';
+      menu.style.opacity = '';
+
+      this._emit('cx-change', { open: false });
+      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-speed-dial-trigger]');
+      if (trigger) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.#toggle();
+          return;
+        }
+        // ArrowDown on trigger opens and focuses first item
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          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;
+
+      const menu = this.#getMenu();
+      const orientation = menu?.getAttribute('aria-orientation') || 'vertical';
+
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' ||
+          e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        const isNext = orientation === 'vertical'
+          ? (e.key === 'ArrowDown' || e.key === 'ArrowRight')
+          : (e.key === 'ArrowRight' || e.key === 'ArrowDown');
+        const ni = isNext
+          ? (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(); }
+    toggle() { this.#toggle(); }
+
+    _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];
+        }
+
+        // Initialize actions as collapsed (for stagger animation)
+        const menu = this.#getMenu();
+        if (menu) {
+          menu.querySelectorAll('[role="menuitem"]').forEach(a => {
+            a.style.opacity = '0';
+            a.style.transform = 'scale(0.3)';
+          });
+        }
+
+        if (wasOpen) this.#open();
+      } catch (e) {
+        console.error('[cx-speed-dial]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-speed-dial', CxSpeedDial);
+  return CxSpeedDial;
+}

package/src/elements/spinner.d.ts

@@ -0,0 +1,15 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/spinner.rs
+
+export interface CxSpinnerAttributes {
+    id?: string;
+    variant?: 'circle' | 'square';
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-spinner': HTMLElement & CxSpinnerAttributes;
+  }
+}

package/src/elements/spinner.js

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/spinner.rs
+
+export function defineCxSpinner(wasmFn, baseClass) {
+  class CxSpinner extends baseClass {
+    static observedAttributes = ['id', 'variant', 'label', 'size'];
+    static _booleanAttrs = new Set([]);
+    static _focusable = false;
+    static _hostDisplay = 'inline-flex';
+
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-spinner]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-spinner', CxSpinner);
+  return CxSpinner;
+}

package/src/elements/split_button.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/split_button.rs
+
+export interface CxSplitButtonAttributes {
+    id: string;
+    label: string;
+    entries?: string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    iconLeading?: string;
+    disabled?: boolean;
+    primaryDisabled?: boolean;
+    triggerDisabled?: boolean;
+    triggerLabel?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-split-button': HTMLElement & CxSplitButtonAttributes;
+  }
+}