@colletdev/core 0.1.3

package/src/elements/avatar.js

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/avatar.rs
+
+export function defineCxAvatar(wasmFn, baseClass) {
+  class CxAvatar extends baseClass {
+    static observedAttributes = ['id', 'label', 'shape', 'size', 'image', 'initials', 'clickable'];
+    static _booleanAttrs = new Set(['clickable']);
+    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-avatar]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-avatar', CxAvatar);
+  return CxAvatar;
+}

package/src/elements/backdrop.d.ts

@@ -0,0 +1,14 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/backdrop.rs
+
+export interface CxBackdropAttributes {
+    tint?: string;
+    blur?: string;
+    dismissible?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-backdrop': HTMLElement & CxBackdropAttributes;
+  }
+}

package/src/elements/backdrop.js

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

package/src/elements/badge.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/badge.rs
+
+export interface CxBadgeAttributes {
+    id?: string;
+    label?: string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    dot?: boolean;
+    dismissible?: boolean;
+    dismissLabel?: string;
+    dynamic?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-badge': HTMLElement & CxBadgeAttributes;
+  }
+}

package/src/elements/badge.js

@@ -0,0 +1,42 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/badge.rs
+
+export function defineCxBadge(wasmFn, baseClass) {
+  class CxBadge extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'intent', 'shape', 'size', 'dot', 'dismissible', 'dismiss-label', 'dynamic'];
+    static _booleanAttrs = new Set(['dot', 'dismissible', 'dynamic']);
+    static _focusable = false;
+    static _hostDisplay = 'inline-flex';
+
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+    if (!this._props.id) {
+      this._props.id = `cx-badge-${Math.random().toString(36).slice(2, 8)}`;
+    }
+    // Delegate dismiss button click
+    // Badge/Alert use data-handler="...-dismiss", Toast uses data-toast-dismiss
+    this._shadow.addEventListener('click', (e) => {
+      const btn = e.target.closest('[data-handler*="dismiss"], [data-toast-dismiss]');
+      if (btn) {
+        this._emit('cx-dismiss', {});
+      }
+    });
+      }
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-badge]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-badge', CxBadge);
+  return CxBadge;
+}

package/src/elements/breadcrumb.d.ts

@@ -0,0 +1,17 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/breadcrumb.rs
+
+export interface CxBreadcrumbAttributes {
+    id?: string;
+    items?: string;
+    separator?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    navLabel?: string;
+    disabled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-breadcrumb': HTMLElement & CxBreadcrumbAttributes;
+  }
+}

package/src/elements/breadcrumb.js

@@ -0,0 +1,41 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/breadcrumb.rs
+
+export function defineCxBreadcrumb(wasmFn, baseClass) {
+  class CxBreadcrumb extends baseClass {
+    static observedAttributes = ['id', 'items', 'separator', 'size', 'nav-label', 'disabled'];
+    static _booleanAttrs = new Set(['disabled']);
+    static _focusable = false;
+    static _hostDisplay = 'inline-flex';
+
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+    // Delegate link clicks to cx-navigate Custom Event
+    this._shadow.addEventListener('click', (e) => {
+      const link = e.target.closest('a[href]');
+      if (!link) return;
+      e.preventDefault();
+      this._emit('cx-navigate', {
+        href: link.getAttribute('href'),
+        label: link.textContent?.trim() || '',
+      });
+    });
+      }
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-breadcrumb]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-breadcrumb', CxBreadcrumb);
+  return CxBreadcrumb;
+}

package/src/elements/button.d.ts

@@ -0,0 +1,24 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/button.rs
+
+export interface CxButtonAttributes {
+    label?: string;
+    variant?: 'filled' | 'ghost' | 'outline' | 'underline' | 'side-indicator';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    iconLeading?: string;
+    iconTrailing?: string;
+    iconOnly?: string;
+    ariaLabel?: string;
+    kind?: 'button' | 'submit' | 'toggle' | 'link';
+    pressed?: boolean;
+    href?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-button': HTMLElement & CxButtonAttributes;
+  }
+}

package/src/elements/button.js

@@ -0,0 +1,36 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/button.rs
+
+export function defineCxButton(wasmFn, baseClass) {
+  class CxButton extends baseClass {
+    static observedAttributes = ['label', 'variant', 'intent', 'shape', 'size', 'disabled', 'icon-leading', 'icon-trailing', 'icon-only', 'aria-label', 'kind', 'pressed', 'href'];
+    static _booleanAttrs = new Set(['disabled', 'pressed']);
+    static _hostDisplay = 'inline-flex';
+
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+    // Delegate click from inner element to Custom Event
+    this._shadow.addEventListener('click', (e) => {
+      if (!this.hasAttribute('disabled')) {
+        this._emit('cx-click', { originalEvent: e });
+      }
+    });
+      }
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-button]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-button', CxButton);
+  return CxButton;
+}

package/src/elements/card.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/card.rs
+
+export interface CxCardAttributes {
+    id?: string;
+    label?: string;
+    variant?: 'elevated' | 'outlined' | 'filled';
+    shape?: 'rounded' | 'sharp';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    header?: string;
+    body?: string;
+    footer?: string;
+    clickable?: boolean;
+    texture?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-card': HTMLElement & CxCardAttributes;
+  }
+}

package/src/elements/card.js

@@ -0,0 +1,67 @@
+// Custom behavior for <cx-card> — click delegation for clickable cards.
+// Source: crates/wasm-api/src/card.rs
+
+export function defineCxCard(wasmFn, baseClass) {
+  class CxCard extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'shape', 'size', 'clickable'];
+    static _booleanAttrs = new Set(['clickable']);
+    static _focusable = false;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Clickable cards: delegate click and Enter/Space keydown
+        shadow.addEventListener('click', (e) => {
+          if (this._props.clickable) {
+            this._emit('cx-click', { originalEvent: e });
+          }
+        });
+
+        shadow.addEventListener('keydown', (e) => {
+          if (this._props.clickable && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            this._emit('cx-click', {});
+          }
+        });
+
+        // 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();
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Apply tint gradient from --cx-card-tint custom property.
+        // Consumers set this on the host via style prop:
+        //   <cx-card style="--cx-card-tint: var(--color-primary)">
+        // The article gets a subtle directional gradient tinted with
+        // that color, plus a whisper-thin border.
+        const article = this._shadow.querySelector('article');
+        if (article) {
+          const tint = getComputedStyle(this).getPropertyValue('--cx-card-tint').trim();
+          if (tint) {
+            article.style.background = `linear-gradient(145deg, color-mix(in oklch, ${tint} 12%, var(--color-surface)) 0%, var(--color-surface) 100%)`;
+            article.style.borderColor = `color-mix(in oklch, var(--color-border) 30%, transparent)`;
+          }
+        }
+      } catch (e) {
+        console.error('[cx-card]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-card', CxCard);
+  return CxCard;
+}

package/src/elements/carousel.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/carousel.rs
+
+export interface CxCarouselAttributes {
+    id?: string;
+    label?: string;
+    variant?: 'editorial' | 'card';
+    shape?: 'sharp' | 'rounded';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    slides?: string;
+    autoplay?: 'off' | 'on';
+    autoplayInterval?: number;
+    loopMode?: boolean;
+    motionBlur?: boolean;
+    customCursor?: boolean;
+    indicator?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-carousel': HTMLElement & CxCarouselAttributes;
+  }
+}