@colletdev/svelte 0.1.3

package/src/breadcrumb.svelte.d.ts

@@ -0,0 +1,16 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { BreadcrumbItem, NavigateDetail } from './types.js';
+
+interface BreadcrumbProps {
+  id?: string;
+  items?: BreadcrumbItem[] | string;
+  separator?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  navLabel?: string;
+  disabled?: boolean;
+  onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
+}
+
+declare const Breadcrumb: Component<BreadcrumbProps, {}>;
+export default Breadcrumb;

package/src/button.svelte

@@ -0,0 +1,52 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-button> -->
+<script lang="ts">
+  import type { ClickDetail } from './types.js';
+
+  interface Props {
+  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;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+  }
+
+  let { label, variant, intent, shape, size, disabled, iconLeading, iconTrailing, iconOnly, ariaLabel, kind, pressed, href, onClick }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onClick?.(e as CustomEvent);
+    el.addEventListener('cx-click', handler);
+    return () => el.removeEventListener('cx-click', handler);
+  });
+
+</script>
+
+<cx-button
+  bind:this={el}
+  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}
+  disabled={disabled || undefined}
+  icon-leading={typeof iconLeading === 'object' && iconLeading != null ? JSON.stringify(iconLeading) : iconLeading}
+  icon-trailing={typeof iconTrailing === 'object' && iconTrailing != null ? JSON.stringify(iconTrailing) : iconTrailing}
+  icon-only={typeof iconOnly === 'object' && iconOnly != null ? JSON.stringify(iconOnly) : iconOnly}
+  aria-label={typeof ariaLabel === 'object' && ariaLabel != null ? JSON.stringify(ariaLabel) : ariaLabel}
+  kind={typeof kind === 'object' && kind != null ? JSON.stringify(kind) : kind}
+  pressed={pressed || undefined}
+  href={typeof href === 'object' && href != null ? JSON.stringify(href) : href}
+/>

package/src/button.svelte.d.ts

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

package/src/card.svelte

@@ -0,0 +1,67 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-card> -->
+<script lang="ts">
+  import type { ClickDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  variant?: 'elevated' | 'outlined' | 'filled';
+  shape?: 'rounded' | 'sharp' | 'soft';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  clickable?: boolean;
+  texture?: boolean;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  children?: import('svelte').Snippet;
+  header?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+  }
+
+  let { id, label, variant, shape, size, clickable, texture, onClick, onKeydown, onKeyup, children, header, footer }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onClick?.(e as CustomEvent);
+    el.addEventListener('cx-click', handler);
+    return () => el.removeEventListener('cx-click', 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);
+  });
+
+</script>
+
+<cx-card
+  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}
+  clickable={clickable || undefined}
+  texture={texture || undefined}
+>
+  {#if header}
+    <div slot="header" style="display:contents">{@render header()}</div>
+  {/if}
+  {#if footer}
+    <div slot="footer" style="display:contents">{@render footer()}</div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-card>

package/src/card.svelte.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { ClickDetail, KeyboardDetail } from './types.js';
+
+interface CardProps {
+  id?: string;
+  label?: string;
+  variant?: 'elevated' | 'outlined' | 'filled';
+  shape?: 'rounded' | 'sharp' | 'soft';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  clickable?: boolean;
+  texture?: boolean;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  children?: import('svelte').Snippet;
+  header?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+}
+
+declare const Card: Component<CardProps, {}>;
+export default Card;

package/src/carousel.svelte

@@ -0,0 +1,59 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-carousel> -->
+<script lang="ts">
+  import type { CarouselDetail, CarouselSlide } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  variant?: 'editorial' | 'card';
+  shape?: 'sharp' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  slides?: CarouselSlide[] | string;
+  autoplay?: 'off' | 'on';
+  autoplayInterval?: number;
+  loopMode?: boolean;
+  motionBlur?: boolean;
+  customCursor?: boolean;
+  indicator?: string;
+  onChange?: (event: CustomEvent<CarouselDetail>) => void;
+  }
+
+  let { id, label, variant, shape, size, slides, autoplay, autoplayInterval, loopMode, motionBlur, customCursor, indicator, onChange }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (slides != null) el.setAttribute('slides', typeof slides === 'object' ? JSON.stringify(slides) : String(slides));
+    else el.removeAttribute('slides');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  /** Advances to the next slide. */
+  export function next() { (el as any)?.next(); }
+  /** Returns to the previous slide. */
+  export function prev() { (el as any)?.prev(); }
+  /** Navigates to the slide at the given index. */
+  export function goTo(index: number) { (el as any)?.goTo(index); }
+</script>
+
+<cx-carousel
+  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}
+  autoplay={typeof autoplay === 'object' && autoplay != null ? JSON.stringify(autoplay) : autoplay}
+  autoplay-interval={typeof autoplayInterval === 'object' && autoplayInterval != null ? JSON.stringify(autoplayInterval) : autoplayInterval}
+  loop-mode={loopMode || undefined}
+  motion-blur={motionBlur || undefined}
+  custom-cursor={customCursor || undefined}
+  indicator={typeof indicator === 'object' && indicator != null ? JSON.stringify(indicator) : indicator}
+/>

package/src/carousel.svelte.d.ts

@@ -0,0 +1,29 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CarouselDetail, CarouselSlide } from './types.js';
+
+interface CarouselProps {
+  id?: string;
+  label?: string;
+  variant?: 'editorial' | 'card';
+  shape?: 'sharp' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  slides?: CarouselSlide[] | string;
+  autoplay?: 'off' | 'on';
+  autoplayInterval?: number;
+  loopMode?: boolean;
+  motionBlur?: boolean;
+  customCursor?: boolean;
+  indicator?: string;
+  onChange?: (event: CustomEvent<CarouselDetail>) => void;
+}
+
+declare const Carousel: Component<CarouselProps, {
+  /** Advances to the next slide. */
+  next(): void;
+  /** Returns to the previous slide. */
+  prev(): void;
+  /** Navigates to the slide at the given index. */
+  goTo(index: number): void;
+}>;
+export default Carousel;

package/src/chat-input.svelte

@@ -0,0 +1,76 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-chat-input> -->
+<script lang="ts">
+  import type { FocusDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  maxRows?: number;
+  showActionButton?: boolean;
+  actionLabel?: string;
+  submitLabel?: string;
+  label?: string;
+  slotted?: boolean;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, shape, size, placeholder, value, disabled, maxRows, showActionButton, actionLabel, submitLabel, label, slotted, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (value != null) el.setAttribute('value', String(value));
+    else el.removeAttribute('value');
+  });
+  $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);
+  });
+  /** Focuses the textarea. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-chat-input
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  placeholder={typeof placeholder === 'object' && placeholder != null ? JSON.stringify(placeholder) : placeholder}
+  disabled={disabled || undefined}
+  max-rows={typeof maxRows === 'object' && maxRows != null ? JSON.stringify(maxRows) : maxRows}
+  show-action-button={showActionButton || undefined}
+  action-label={typeof actionLabel === 'object' && actionLabel != null ? JSON.stringify(actionLabel) : actionLabel}
+  submit-label={typeof submitLabel === 'object' && submitLabel != null ? JSON.stringify(submitLabel) : submitLabel}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  slotted={slotted || undefined}
+/>

package/src/chat-input.svelte.d.ts

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, KeyboardDetail } from './types.js';
+
+interface ChatInputProps {
+  id?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  maxRows?: number;
+  showActionButton?: boolean;
+  actionLabel?: string;
+  submitLabel?: string;
+  label?: string;
+  slotted?: boolean;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const ChatInput: Component<ChatInputProps, {
+  /** Focuses the textarea. */
+  focus(): void;
+}>;
+export default ChatInput;

package/src/checkbox.svelte

@@ -0,0 +1,83 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-checkbox> -->
+<script lang="ts">
+  import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  shape?: 'sharp' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. */
+  checked?: boolean | '' | 'checked' | 'indeterminate';
+  disabled?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  unlabeled?: boolean;
+  onInput?: (event: CustomEvent<CheckedDetail>) => void;
+  onChange?: (event: CustomEvent<CheckedDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, label, shape, size, checked, disabled, required, helperText, error, unlabeled, onInput, onChange, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+  let __serialize_checked = $derived(checked === true ? 'checked' : checked === false ? undefined : checked);
+
+  $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);
+  });
+  /** Focuses the checkbox input. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-checkbox
+  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}
+  checked={__serialize_checked}
+  disabled={disabled || undefined}
+  required={required || undefined}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error={typeof error === 'object' && error != null ? JSON.stringify(error) : error}
+  unlabeled={unlabeled || undefined}
+/>

package/src/checkbox.svelte.d.ts

@@ -0,0 +1,29 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+
+interface CheckboxProps {
+  id?: string;
+  label?: string;
+  shape?: 'sharp' | 'rounded';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. */
+  checked?: boolean | '' | 'checked' | 'indeterminate';
+  disabled?: boolean;
+  required?: boolean;
+  helperText?: string;
+  error?: string;
+  unlabeled?: boolean;
+  onInput?: (event: CustomEvent<CheckedDetail>) => void;
+  onChange?: (event: CustomEvent<CheckedDetail>) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Checkbox: Component<CheckboxProps, {
+  /** Focuses the checkbox input. */
+  focus(): void;
+}>;
+export default Checkbox;

package/src/code-block.svelte

@@ -0,0 +1,40 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-code-block> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  content?: string;
+  variant?: string;
+  shape?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  language?: string;
+  filename?: string;
+  lineNumbers?: boolean;
+  copyButton?: boolean;
+  trafficLights?: boolean;
+  slotted?: boolean;
+  }
+
+  let { id, content, variant, shape, size, language, filename, lineNumbers, copyButton, trafficLights, slotted }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-code-block
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  content={typeof content === 'object' && content != null ? JSON.stringify(content) : content}
+  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}
+  language={typeof language === 'object' && language != null ? JSON.stringify(language) : language}
+  filename={typeof filename === 'object' && filename != null ? JSON.stringify(filename) : filename}
+  line-numbers={lineNumbers || undefined}
+  copy-button={copyButton || undefined}
+  traffic-lights={trafficLights || undefined}
+  slotted={slotted || undefined}
+/>

package/src/code-block.svelte.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface CodeBlockProps {
+  id?: string;
+  content?: string;
+  variant?: string;
+  shape?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  language?: string;
+  filename?: string;
+  lineNumbers?: boolean;
+  copyButton?: boolean;
+  trafficLights?: boolean;
+  slotted?: boolean;
+}
+
+declare const CodeBlock: Component<CodeBlockProps, {}>;
+export default CodeBlock;

package/src/collapsible.svelte

@@ -0,0 +1,56 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-collapsible> -->
+<script lang="ts">
+  import type { CollapsibleDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  triggerHtml?: string;
+  open?: boolean;
+  icon?: string;
+  noIcon?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
+  children?: import('svelte').Snippet;
+  trigger?: import('svelte').Snippet;
+  }
+
+  let { id, label, triggerHtml, open, icon, noIcon, size, disabled, onChange, children, trigger }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onChange?.(e as CustomEvent);
+    el.addEventListener('cx-change', handler);
+    return () => el.removeEventListener('cx-change', handler);
+  });
+  /** Expands the collapsible content. */
+  export function doOpen() { (el as any)?.open(); }
+  /** Collapses the content. */
+  export function close() { (el as any)?.close(); }
+  /** Toggles the collapsible state. */
+  export function toggle() { (el as any)?.toggle(); }
+</script>
+
+<cx-collapsible
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  trigger-html={typeof triggerHtml === 'object' && triggerHtml != null ? JSON.stringify(triggerHtml) : triggerHtml}
+  open={open || undefined}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  no-icon={noIcon || undefined}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  disabled={disabled || undefined}
+>
+  {#if trigger}
+    <div slot="trigger" style="display:contents">{@render trigger()}</div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-collapsible>

package/src/collapsible.svelte.d.ts

@@ -0,0 +1,27 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CollapsibleDetail } from './types.js';
+
+interface CollapsibleProps {
+  id?: string;
+  label?: string;
+  triggerHtml?: string;
+  open?: boolean;
+  icon?: string;
+  noIcon?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
+  children?: import('svelte').Snippet;
+  trigger?: import('svelte').Snippet;
+}
+
+declare const Collapsible: Component<CollapsibleProps, {
+  /** Expands the collapsible content. */
+  doOpen(): void;
+  /** Collapses the content. */
+  close(): void;
+  /** Toggles the collapsible state. */
+  toggle(): void;
+}>;
+export default Collapsible;