@colletdev/svelte

Svelte 5 runes-first wrappers for the Collet component library. Typed $props(), callback props, and bind:this refs over 48 Rust/WASM Custom Elements.

Install

npm install @colletdev/svelte @colletdev/core

Quick Start

<script lang="ts">
  import { init, Button, TextInput } from '@colletdev/svelte';

  await init(); // once, at app startup
</script>

<Button variant="filled" label="Save" intent="primary" oncxclick={save} />
<TextInput label="Email" kind="email" oncxinput={onInput} />

Features

• Runes-first -- components use $props() with full type inference
• Callback props -- oncxclick, oncxchange, oncxinput (not on:event syntax)
• Typed refs -- bind:this exposes imperative methods (.open(), .close(), .focus())
• Structured data -- SelectOption[], TableColumn[], AccordionItem[] fully typed
• Ships source -- .svelte files are included as-is; your bundler compiles them

Event Pattern

Svelte 5 uses callback props instead of the on: directive. All custom events use the oncx prefix:

<Select
  label="Country"
  options={countries}
  oncxchange={(e) => setCountry(e.detail.value)}
/>

Custom Element Types

For direct <cx-*> tag usage in Svelte templates, import the element type definitions:

/// <reference types="@colletdev/svelte/elements" />

API Reference

See @colletdev/docs for the full props/events reference and framework guides.

License

MIT -- github.com/Danrozen87/collet