@colletdev/svelte 0.1.3

package/README.md

@@ -0,0 +1,58 @@
+# @collet/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
+
+```bash
+npm install @collet/svelte @collet/core
+```
+
+## Quick Start
+
+```svelte
+<script lang="ts">
+  import { init, Button, TextInput } from '@collet/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:
+
+```svelte
+<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:
+
+```ts
+/// <reference types="@collet/svelte/elements" />
+```
+
+## API Reference
+
+See [@collet/docs](https://www.npmjs.com/package/@collet/docs) for the full props/events reference and framework guides.
+
+## License
+
+MIT -- [github.com/Danrozen87/collet](https://github.com/Danrozen87/collet)

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@colletdev/svelte",
+  "version": "0.1.3",
+  "description": "Svelte 5 wrappers for Collet Rust/WASM UI components",
+  "type": "module",
+  "svelte": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "svelte": "./src/index.ts"
+    },
+    "./elements": {
+      "types": "./src/elements.d.ts"
+    }
+  },
+  "files": [
+    "src/"
+  ],
+  "peerDependencies": {
+    "@colletdev/core": ">=0.1.0",
+    "svelte": ">=5.0.0"
+  },
+  "keywords": ["svelte", "svelte5", "runes", "web-components", "rust", "wasm", "ui", "collet"],
+  "author": "Dan",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Danrozen87/collet",
+    "directory": "packages/svelte"
+  }
+}

package/src/accordion.svelte

@@ -0,0 +1,52 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-accordion> -->
+<script lang="ts">
+  import type { AccordionDetail, AccordionItem } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  items?: AccordionItem[] | string;
+  mode?: 'single' | 'multiple';
+  collapsible?: boolean;
+  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  defaultExpanded?: string[] | string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  onChange?: (event: CustomEvent<AccordionDetail>) => void;
+  }
+
+  let { id, label, items, mode, collapsible, headingLevel, defaultExpanded, size, disabled, onChange }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (items != null) el.setAttribute('items', typeof items === 'object' ? JSON.stringify(items) : String(items));
+    else el.removeAttribute('items');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (defaultExpanded != null) el.setAttribute('default-expanded', typeof defaultExpanded === 'object' ? JSON.stringify(defaultExpanded) : String(defaultExpanded));
+    else el.removeAttribute('default-expanded');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+
+</script>
+
+<cx-accordion
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  mode={typeof mode === 'object' && mode != null ? JSON.stringify(mode) : mode}
+  collapsible={collapsible || undefined}
+  heading-level={typeof headingLevel === 'object' && headingLevel != null ? JSON.stringify(headingLevel) : headingLevel}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  disabled={disabled || undefined}
+/>

package/src/accordion.svelte.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { AccordionDetail, AccordionItem } from './types.js';
+
+interface AccordionProps {
+  id?: string;
+  label?: string;
+  items?: AccordionItem[] | string;
+  mode?: 'single' | 'multiple';
+  collapsible?: boolean;
+  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  defaultExpanded?: string[] | string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  onChange?: (event: CustomEvent<AccordionDetail>) => void;
+}
+
+declare const Accordion: Component<AccordionProps, {}>;
+export default Accordion;

package/src/activity-group.svelte

@@ -0,0 +1,34 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-activity-group> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  status?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  border?: string;
+  summary?: string;
+  action?: string;
+  expanded?: boolean;
+  parts?: string;
+  }
+
+  let { id, status, size, border, summary, action, expanded, parts }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-activity-group
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  status={typeof status === 'object' && status != null ? JSON.stringify(status) : status}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  border={typeof border === 'object' && border != null ? JSON.stringify(border) : border}
+  summary={typeof summary === 'object' && summary != null ? JSON.stringify(summary) : summary}
+  action={typeof action === 'object' && action != null ? JSON.stringify(action) : action}
+  expanded={expanded || undefined}
+  parts={typeof parts === 'object' && parts != null ? JSON.stringify(parts) : parts}
+/>

package/src/activity-group.svelte.d.ts

@@ -0,0 +1,16 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface ActivityGroupProps {
+  id?: string;
+  status?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  border?: string;
+  summary?: string;
+  action?: string;
+  expanded?: boolean;
+  parts?: string;
+}
+
+declare const ActivityGroup: Component<ActivityGroupProps, {}>;
+export default ActivityGroup;

package/src/alert.svelte

@@ -0,0 +1,61 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-alert> -->
+<script lang="ts">
+  import type { DismissDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  title?: string;
+  description?: string;
+  variant?: 'subtle' | 'filled' | 'outline';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showIcon?: boolean;
+  icon?: string;
+  dismissible?: boolean;
+  dismissLabel?: string;
+  compact?: boolean;
+  dynamic?: boolean;
+  actionsHtml?: string;
+  onDismiss?: (event: CustomEvent<DismissDetail>) => void;
+  actions?: import('svelte').Snippet;
+  }
+
+  let { id, title, description, variant, intent, size, showIcon, icon, dismissible, dismissLabel, compact, dynamic, actionsHtml, onDismiss, actions }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (title != null) el.setAttribute('title', String(title));
+    else el.removeAttribute('title');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onDismiss?.(e as CustomEvent);
+    el.addEventListener('cx-dismiss', handler);
+    return () => el.removeEventListener('cx-dismiss', handler);
+  });
+
+</script>
+
+<cx-alert
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  description={typeof description === 'object' && description != null ? JSON.stringify(description) : description}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  intent={typeof intent === 'object' && intent != null ? JSON.stringify(intent) : intent}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  show-icon={showIcon || undefined}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  dismissible={dismissible || undefined}
+  dismiss-label={typeof dismissLabel === 'object' && dismissLabel != null ? JSON.stringify(dismissLabel) : dismissLabel}
+  compact={compact || undefined}
+  dynamic={dynamic || undefined}
+  actions-html={typeof actionsHtml === 'object' && actionsHtml != null ? JSON.stringify(actionsHtml) : actionsHtml}
+>
+  {#if actions}
+    <div slot="actions" style="display:contents">{@render actions()}</div>
+  {/if}
+</cx-alert>

package/src/alert.svelte.d.ts

@@ -0,0 +1,24 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { DismissDetail } from './types.js';
+
+interface AlertProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  variant?: 'subtle' | 'filled' | 'outline';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showIcon?: boolean;
+  icon?: string;
+  dismissible?: boolean;
+  dismissLabel?: string;
+  compact?: boolean;
+  dynamic?: boolean;
+  actionsHtml?: string;
+  onDismiss?: (event: CustomEvent<DismissDetail>) => void;
+  actions?: import('svelte').Snippet;
+}
+
+declare const Alert: Component<AlertProps, {}>;
+export default Alert;

package/src/autocomplete.svelte

@@ -0,0 +1,126 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-autocomplete> -->
+<script lang="ts">
+  import type { FocusDetail, InputDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** 'single' for single select, 'multiple' for multi-select with chips. */
+  mode?: 'single' | 'multiple';
+  selected?: string[] | string;
+  /** Current search query text. Controlled by onInput events. */
+  query?: string;
+  placeholder?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  name?: string;
+  /** When true, user can submit values not in the items list. */
+  allowCustom?: boolean;
+  clearable?: boolean;
+  /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. */
+  items?: SelectOption[] | string;
+  groups?: OptionGroup[] | string;
+  onInput?: (event: CustomEvent<InputDetail>) => void;
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, label, variant, shape, size, mode, selected, query, placeholder, helperText, error, disabled, required, readonly, name, allowCustom, clearable, items, groups, onInput, onChange, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (name != null) el.setAttribute('name', String(name));
+    else el.removeAttribute('name');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (selected != null) el.setAttribute('selected', typeof selected === 'object' ? JSON.stringify(selected) : String(selected));
+    else el.removeAttribute('selected');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (items != null) el.setAttribute('items', typeof items === 'object' ? JSON.stringify(items) : String(items));
+    else el.removeAttribute('items');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (groups != null) el.setAttribute('groups', typeof groups === 'object' ? JSON.stringify(groups) : String(groups));
+    else el.removeAttribute('groups');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onInput?.(e as CustomEvent);
+    el.addEventListener('cx-input', handler);
+    return () => el.removeEventListener('cx-input', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onFocus?.(e as CustomEvent);
+    el.addEventListener('cx-focus', handler);
+    return () => el.removeEventListener('cx-focus', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onBlur?.(e as CustomEvent);
+    el.addEventListener('cx-blur', handler);
+    return () => el.removeEventListener('cx-blur', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeydown?.(e as CustomEvent);
+    el.addEventListener('cx-keydown', handler);
+    return () => el.removeEventListener('cx-keydown', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onKeyup?.(e as CustomEvent);
+    el.addEventListener('cx-keyup', handler);
+    return () => el.removeEventListener('cx-keyup', handler);
+  });
+  /** Opens the suggestion dropdown. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the suggestion dropdown. */
+  export function close() { (el as any)?.close(); }
+  /** Clears all selections (multi-mode) or the input (single-mode). */
+  export function clear() { (el as any)?.clear(); }
+  /** Focuses the search input. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-autocomplete
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  mode={typeof mode === 'object' && mode != null ? JSON.stringify(mode) : mode}
+  query={typeof query === 'object' && query != null ? JSON.stringify(query) : query}
+  placeholder={typeof placeholder === 'object' && placeholder != null ? JSON.stringify(placeholder) : placeholder}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  readonly={readonly || undefined}
+  allow-custom={allowCustom || undefined}
+  clearable={clearable || undefined}
+/>

package/src/autocomplete.svelte.d.ts

@@ -0,0 +1,47 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, InputDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
+
+interface AutocompleteProps {
+  id?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** 'single' for single select, 'multiple' for multi-select with chips. */
+  mode?: 'single' | 'multiple';
+  selected?: string[] | string;
+  /** Current search query text. Controlled by onInput events. */
+  query?: string;
+  placeholder?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  name?: string;
+  /** When true, user can submit values not in the items list. */
+  allowCustom?: boolean;
+  clearable?: boolean;
+  /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. */
+  items?: SelectOption[] | string;
+  groups?: OptionGroup[] | string;
+  onInput?: (event: CustomEvent<InputDetail>) => void;
+  onChange?: (event: CustomEvent<SelectDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Autocomplete: Component<AutocompleteProps, {
+  /** Opens the suggestion dropdown. */
+  open(): void;
+  /** Closes the suggestion dropdown. */
+  close(): void;
+  /** Clears all selections (multi-mode) or the input (single-mode). */
+  clear(): void;
+  /** Focuses the search input. */
+  focus(): void;
+}>;
+export default Autocomplete;

package/src/avatar.svelte

@@ -0,0 +1,32 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-avatar> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  label?: string;
+  shape?: 'circle' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  image?: string;
+  initials?: string;
+  clickable?: boolean;
+  }
+
+  let { id, label, shape, size, image, initials, clickable }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-avatar
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  image={typeof image === 'object' && image != null ? JSON.stringify(image) : image}
+  initials={typeof initials === 'object' && initials != null ? JSON.stringify(initials) : initials}
+  clickable={clickable || undefined}
+/>

package/src/avatar.svelte.d.ts

@@ -0,0 +1,15 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface AvatarProps {
+  id?: string;
+  label?: string;
+  shape?: 'circle' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  image?: string;
+  initials?: string;
+  clickable?: boolean;
+}
+
+declare const Avatar: Component<AvatarProps, {}>;
+export default Avatar;

package/src/backdrop.svelte

@@ -0,0 +1,24 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-backdrop> -->
+<script lang="ts">
+
+  interface Props {
+  tint?: string;
+  blur?: string;
+  dismissible?: boolean;
+  }
+
+  let { tint, blur, dismissible }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-backdrop
+  bind:this={el}
+  tint={typeof tint === 'object' && tint != null ? JSON.stringify(tint) : tint}
+  blur={typeof blur === 'object' && blur != null ? JSON.stringify(blur) : blur}
+  dismissible={dismissible || undefined}
+/>

package/src/backdrop.svelte.d.ts

@@ -0,0 +1,11 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface BackdropProps {
+  tint?: string;
+  blur?: string;
+  dismissible?: boolean;
+}
+
+declare const Backdrop: Component<BackdropProps, {}>;
+export default Backdrop;

package/src/badge.svelte

@@ -0,0 +1,45 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-badge> -->
+<script lang="ts">
+
+  interface Props {
+  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;
+  onDismiss?: (event: CustomEvent) => void;
+  }
+
+  let { id, label, variant, intent, shape, size, dot, dismissible, dismissLabel, dynamic, onDismiss }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onDismiss?.(e as CustomEvent);
+    el.addEventListener('cx-dismiss', handler);
+    return () => el.removeEventListener('cx-dismiss', handler);
+  });
+
+</script>
+
+<cx-badge
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  intent={typeof intent === 'object' && intent != null ? JSON.stringify(intent) : intent}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  dot={dot || undefined}
+  dismissible={dismissible || undefined}
+  dismiss-label={typeof dismissLabel === 'object' && dismissLabel != null ? JSON.stringify(dismissLabel) : dismissLabel}
+  dynamic={dynamic || undefined}
+/>

package/src/badge.svelte.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface BadgeProps {
+  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;
+  onDismiss?: (event: CustomEvent) => void;
+}
+
+declare const Badge: Component<BadgeProps, {}>;
+export default Badge;

package/src/breadcrumb.svelte

@@ -0,0 +1,42 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-breadcrumb> -->
+<script lang="ts">
+  import type { BreadcrumbItem, NavigateDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  items?: BreadcrumbItem[] | string;
+  separator?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  navLabel?: string;
+  disabled?: boolean;
+  onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
+  }
+
+  let { id, items, separator, size, navLabel, disabled, onNavigate }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (items != null) el.setAttribute('items', typeof items === 'object' ? JSON.stringify(items) : String(items));
+    else el.removeAttribute('items');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onNavigate?.(e as CustomEvent);
+    el.addEventListener('cx-navigate', handler);
+    return () => el.removeEventListener('cx-navigate', handler);
+  });
+
+</script>
+
+<cx-breadcrumb
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  separator={typeof separator === 'object' && separator != null ? JSON.stringify(separator) : separator}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  nav-label={typeof navLabel === 'object' && navLabel != null ? JSON.stringify(navLabel) : navLabel}
+  disabled={disabled || undefined}
+/>