@colletdev/svelte 0.1.3

package/src/fab.svelte

@@ -0,0 +1,48 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-fab> -->
+<script lang="ts">
+  import type { ClickDetail } from './types.js';
+
+  interface Props {
+  icon?: string;
+  label?: string;
+  ariaLabel?: string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  shape?: 'rounded' | 'pill';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  hasPopup?: boolean;
+  expanded?: boolean;
+  controls?: string;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+  }
+
+  let { icon, label, ariaLabel, variant, intent, shape, size, disabled, hasPopup, expanded, controls, 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-fab
+  bind:this={el}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  aria-label={typeof ariaLabel === 'object' && ariaLabel != null ? JSON.stringify(ariaLabel) : ariaLabel}
+  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}
+  has-popup={hasPopup || undefined}
+  expanded={expanded || undefined}
+  controls={typeof controls === 'object' && controls != null ? JSON.stringify(controls) : controls}
+/>

package/src/fab.svelte.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { ClickDetail } from './types.js';
+
+interface FabProps {
+  icon?: string;
+  label?: string;
+  ariaLabel?: string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  shape?: 'rounded' | 'pill';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  hasPopup?: boolean;
+  expanded?: boolean;
+  controls?: string;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+}
+
+declare const Fab: Component<FabProps, {}>;
+export default Fab;

package/src/file-upload.svelte

@@ -0,0 +1,55 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-file-upload> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  label?: string;
+  mode?: 'inline' | 'overlay';
+  variant?: 'outline' | 'filled' | 'subtle';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  multiple?: boolean;
+  accept?: string;
+  maxSize?: number;
+  heading?: string;
+  browseText?: string;
+  hint?: string;
+  capture?: string;
+  preview?: boolean;
+  onChange?: (event: CustomEvent) => void;
+  }
+
+  let { id, label, mode, variant, shape, size, disabled, multiple, accept, maxSize, heading, browseText, hint, capture, preview, onChange }: 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);
+  });
+
+</script>
+
+<cx-file-upload
+  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}
+  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}
+  disabled={disabled || undefined}
+  multiple={multiple || undefined}
+  accept={typeof accept === 'object' && accept != null ? JSON.stringify(accept) : accept}
+  max-size={typeof maxSize === 'object' && maxSize != null ? JSON.stringify(maxSize) : maxSize}
+  heading={typeof heading === 'object' && heading != null ? JSON.stringify(heading) : heading}
+  browse-text={typeof browseText === 'object' && browseText != null ? JSON.stringify(browseText) : browseText}
+  hint={typeof hint === 'object' && hint != null ? JSON.stringify(hint) : hint}
+  capture={typeof capture === 'object' && capture != null ? JSON.stringify(capture) : capture}
+  preview={preview || undefined}
+/>

package/src/file-upload.svelte.d.ts

@@ -0,0 +1,24 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface FileUploadProps {
+  id?: string;
+  label?: string;
+  mode?: 'inline' | 'overlay';
+  variant?: 'outline' | 'filled' | 'subtle';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  disabled?: boolean;
+  multiple?: boolean;
+  accept?: string;
+  maxSize?: number;
+  heading?: string;
+  browseText?: string;
+  hint?: string;
+  capture?: string;
+  preview?: boolean;
+  onChange?: (event: CustomEvent) => void;
+}
+
+declare const FileUpload: Component<FileUploadProps, {}>;
+export default FileUpload;

package/src/index.ts

@@ -0,0 +1,85 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import '@colletdev/core';
+
+// Re-export init and types from core
+export { init, componentNames } from '@colletdev/core';
+export type { InitOptions, ComponentName } from '@colletdev/core';
+
+// Structured prop types
+export type {
+  SelectOption, OptionGroup,
+  TabItem,
+  TableColumn, TableCell, TableRow, SortState, PaginationConfig, FooterRow, EmptyStateConfig,
+  AccordionItem,
+  MenuEntry, MenuRadioItem,
+  SidebarNavItem, SidebarGroup,
+  BreadcrumbItem,
+  RadioOption,
+  ToggleItem,
+  SplitMenuEntry,
+  SpeedDialAction,
+  CarouselSlide,
+  MessageGroupPart,
+  StepperStep,
+} from './types.js';
+
+// Event detail types
+export type {
+  InputDetail, SelectDetail, CheckedDetail, SliderDetail,
+  ToggleDetail, AccordionDetail, CollapsibleDetail,
+  MenuActionDetail, MenuChangeDetail,
+  SortDetail, TableSelectDetail, TableExpandDetail, PageDetail,
+  NavigateDetail, ClickDetail, CloseDetail, DismissDetail,
+  FocusDetail, KeyboardDetail,
+  CarouselDetail, FileChangeDetail, FileInfo,
+} from './types.js';
+
+export { default as Accordion } from './accordion.svelte';
+export { default as ActivityGroup } from './activity-group.svelte';
+export { default as Alert } from './alert.svelte';
+export { default as Autocomplete } from './autocomplete.svelte';
+export { default as Avatar } from './avatar.svelte';
+export { default as Backdrop } from './backdrop.svelte';
+export { default as Badge } from './badge.svelte';
+export { default as Breadcrumb } from './breadcrumb.svelte';
+export { default as Button } from './button.svelte';
+export { default as Card } from './card.svelte';
+export { default as Carousel } from './carousel.svelte';
+export { default as ChatInput } from './chat-input.svelte';
+export { default as Checkbox } from './checkbox.svelte';
+export { default as CodeBlock } from './code-block.svelte';
+export { default as Collapsible } from './collapsible.svelte';
+export { default as DatePicker } from './date-picker.svelte';
+export { default as Dialog } from './dialog.svelte';
+export { default as Drawer } from './drawer.svelte';
+export { default as Fab } from './fab.svelte';
+export { default as FileUpload } from './file-upload.svelte';
+export { default as Listbox } from './listbox.svelte';
+export { default as Menu } from './menu.svelte';
+export { default as MessageBubble } from './message-bubble.svelte';
+export { default as MessageGroup } from './message-group.svelte';
+export { default as MessagePart } from './message-part.svelte';
+export { default as Pagination } from './pagination.svelte';
+export { default as Popover } from './popover.svelte';
+export { default as ProfileMenu } from './profile-menu.svelte';
+export { default as Progress } from './progress.svelte';
+export { default as RadioGroup } from './radio-group.svelte';
+export { default as Scrollbar } from './scrollbar.svelte';
+export { default as SearchBar } from './search-bar.svelte';
+export { default as Select } from './select.svelte';
+export { default as Sidebar } from './sidebar.svelte';
+export { default as Skeleton } from './skeleton.svelte';
+export { default as Slider } from './slider.svelte';
+export { default as SpeedDial } from './speed-dial.svelte';
+export { default as Spinner } from './spinner.svelte';
+export { default as SplitButton } from './split-button.svelte';
+export { default as Stepper } from './stepper.svelte';
+export { default as Switch } from './switch.svelte';
+export { default as Table } from './table.svelte';
+export { default as Tabs } from './tabs.svelte';
+export { default as Text } from './text.svelte';
+export { default as TextInput } from './text-input.svelte';
+export { default as Thinking } from './thinking.svelte';
+export { default as Toast } from './toast.svelte';
+export { default as ToggleGroup } from './toggle-group.svelte';
+export { default as Tooltip } from './tooltip.svelte';

package/src/label.svelte

@@ -0,0 +1,29 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte wrapper for <cx-label> -->
+<script lang="ts">
+  export let id: string;
+  export let text: string;
+  export let forInput: string | undefined = undefined;
+  export let size: string | undefined = undefined;
+  export let required: boolean | undefined = undefined;
+  export let optionalText: string | undefined = undefined;
+  export let disabled: boolean | undefined = undefined;
+  export let helperText: string | undefined = undefined;
+  export let error: string | undefined = undefined;
+
+</script>
+
+<cx-label
+    id={id}
+    text={text}
+    for-input={forInput}
+    size={size}
+    required={required || undefined}
+    optional-text={optionalText}
+    disabled={disabled || undefined}
+    helper-text={helperText}
+    error={error}
+
+>
+  <slot />
+</cx-label>

package/src/label.svelte.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import { SvelteComponent } from 'svelte';
+
+export interface LabelProps {
+    id: string;
+    text: string;
+    forInput?: string;
+    size?: string;
+    required?: boolean;
+    optionalText?: string;
+    disabled?: boolean;
+    helperText?: string;
+    error?: string;
+}
+
+export interface LabelEvents {
+
+}
+
+export default class Label extends SvelteComponent<LabelProps, LabelEvents> {}

package/src/listbox.svelte

@@ -0,0 +1,75 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-listbox> -->
+<script lang="ts">
+  import type { FocusDetail, KeyboardDetail, OptionGroup, SelectOption } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selectionMode?: string;
+  selected?: string[] | string;
+  items?: SelectOption[] | string;
+  groups?: OptionGroup[] | string;
+  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, selectionMode, selected, items, groups, onFocus, onBlur, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $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) => 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);
+  });
+
+</script>
+
+<cx-listbox
+  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}
+  selection-mode={typeof selectionMode === 'object' && selectionMode != null ? JSON.stringify(selectionMode) : selectionMode}
+/>

package/src/listbox.svelte.d.ts

@@ -0,0 +1,21 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, KeyboardDetail, OptionGroup, SelectOption } from './types.js';
+
+interface ListboxProps {
+  id?: string;
+  label?: string;
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  selectionMode?: string;
+  selected?: string[] | string;
+  items?: SelectOption[] | string;
+  groups?: OptionGroup[] | string;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Listbox: Component<ListboxProps, {}>;
+export default Listbox;

package/src/menu.svelte

@@ -0,0 +1,76 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-menu> -->
+<script lang="ts">
+  import type { KeyboardDetail, MenuActionDetail, MenuChangeDetail, MenuEntry } from './types.js';
+
+  interface Props {
+  id?: string;
+  triggerLabel: string;
+  entries?: MenuEntry[] | string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  width?: 'auto' | 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  icon?: string;
+  disabled?: boolean;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+  onChange?: (event: CustomEvent<MenuChangeDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, triggerLabel, entries, variant, shape, width, size, icon, disabled, onAction, onChange, onKeydown, onKeyup }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (width != null) el.setAttribute('width', String(width));
+    else el.removeAttribute('width');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (entries != null) el.setAttribute('entries', typeof entries === 'object' ? JSON.stringify(entries) : String(entries));
+    else el.removeAttribute('entries');
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onAction?.(e as CustomEvent);
+    el.addEventListener('cx-action', handler);
+    return () => el.removeEventListener('cx-action', 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) => 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 menu dropdown. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the menu dropdown. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-menu
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  trigger-label={typeof triggerLabel === 'object' && triggerLabel != null ? JSON.stringify(triggerLabel) : triggerLabel}
+  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}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  disabled={disabled || undefined}
+/>

package/src/menu.svelte.d.ts

@@ -0,0 +1,27 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { KeyboardDetail, MenuActionDetail, MenuChangeDetail, MenuEntry } from './types.js';
+
+interface MenuProps {
+  id?: string;
+  triggerLabel: string;
+  entries?: MenuEntry[] | string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  width?: 'auto' | 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  icon?: string;
+  disabled?: boolean;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+  onChange?: (event: CustomEvent<MenuChangeDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Menu: Component<MenuProps, {
+  /** Opens the menu dropdown. */
+  open(): void;
+  /** Closes the menu dropdown. */
+  close(): void;
+}>;
+export default Menu;

package/src/message-bubble.svelte

@@ -0,0 +1,49 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-message-bubble> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  role?: 'user' | 'assistant';
+  variant?: 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded';
+  alignment?: 'auto' | 'start' | 'end';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  htmlContent?: string;
+  senderName?: string;
+  timestamp?: string;
+  border?: string;
+  animated?: boolean;
+  children?: import('svelte').Snippet;
+  }
+
+  let { id, role, variant, shape, alignment, size, htmlContent, senderName, timestamp, border, animated, children }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (role != null) el.setAttribute('role', String(role));
+    else el.removeAttribute('role');
+  });
+
+</script>
+
+<cx-message-bubble
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  alignment={typeof alignment === 'object' && alignment != null ? JSON.stringify(alignment) : alignment}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  html-content={typeof htmlContent === 'object' && htmlContent != null ? JSON.stringify(htmlContent) : htmlContent}
+  sender-name={typeof senderName === 'object' && senderName != null ? JSON.stringify(senderName) : senderName}
+  timestamp={typeof timestamp === 'object' && timestamp != null ? JSON.stringify(timestamp) : timestamp}
+  border={typeof border === 'object' && border != null ? JSON.stringify(border) : border}
+  animated={animated || undefined}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</cx-message-bubble>

package/src/message-bubble.svelte.d.ts

@@ -0,0 +1,20 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface MessageBubbleProps {
+  id?: string;
+  role?: 'user' | 'assistant';
+  variant?: 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded';
+  alignment?: 'auto' | 'start' | 'end';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  htmlContent?: string;
+  senderName?: string;
+  timestamp?: string;
+  border?: string;
+  animated?: boolean;
+  children?: import('svelte').Snippet;
+}
+
+declare const MessageBubble: Component<MessageBubbleProps, {}>;
+export default MessageBubble;

package/src/message-group.svelte

@@ -0,0 +1,41 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-message-group> -->
+<script lang="ts">
+  import type { MessageGroupPart } from './types.js';
+
+  interface Props {
+  id?: string;
+  role?: 'user' | 'assistant';
+  alignment?: 'auto' | 'start' | 'end';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  senderName?: string;
+  animated?: boolean;
+  parts?: MessageGroupPart[] | string;
+  }
+
+  let { id, role, alignment, size, senderName, animated, parts }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (role != null) el.setAttribute('role', String(role));
+    else el.removeAttribute('role');
+  });
+  $effect(() => {
+    if (!el) return;
+    if (parts != null) el.setAttribute('parts', typeof parts === 'object' ? JSON.stringify(parts) : String(parts));
+    else el.removeAttribute('parts');
+  });
+
+</script>
+
+<cx-message-group
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  alignment={typeof alignment === 'object' && alignment != null ? JSON.stringify(alignment) : alignment}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  sender-name={typeof senderName === 'object' && senderName != null ? JSON.stringify(senderName) : senderName}
+  animated={animated || undefined}
+/>

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

@@ -0,0 +1,16 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { MessageGroupPart } from './types.js';
+
+interface MessageGroupProps {
+  id?: string;
+  role?: 'user' | 'assistant';
+  alignment?: 'auto' | 'start' | 'end';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  senderName?: string;
+  animated?: boolean;
+  parts?: MessageGroupPart[] | string;
+}
+
+declare const MessageGroup: Component<MessageGroupProps, {}>;
+export default MessageGroup;

package/src/message-part.svelte

@@ -0,0 +1,20 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-message-part> -->
+<script lang="ts">
+
+  interface Props {
+
+  }
+
+  let {  }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-message-part
+  bind:this={el}
+
+/>

package/src/message-part.svelte.d.ts

@@ -0,0 +1,9 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface MessagePartProps {
+
+}
+
+declare const MessagePart: Component<MessagePartProps, {}>;
+export default MessagePart;