@colletdev/svelte 0.1.3

package/src/select.svelte

@@ -0,0 +1,112 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-select> -->
+<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';
+  mode?: 'single' | 'multiple';
+  selected?: string[] | string;
+  placeholder?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  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, placeholder, helperText, error, disabled, required, name, 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 dropdown. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the dropdown. */
+  export function close() { (el as any)?.close(); }
+  /** Focuses the trigger button. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-select
+  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}
+  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}
+/>

package/src/select.svelte.d.ts

@@ -0,0 +1,37 @@
+// 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 SelectProps {
+  id?: string;
+  label?: string;
+  variant?: 'outline' | 'filled' | 'ghost';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  mode?: 'single' | 'multiple';
+  selected?: string[] | string;
+  placeholder?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  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 Select: Component<SelectProps, {
+  /** Opens the dropdown. */
+  open(): void;
+  /** Closes the dropdown. */
+  close(): void;
+  /** Focuses the trigger button. */
+  focus(): void;
+}>;
+export default Select;

package/src/separator.svelte

@@ -0,0 +1,25 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte wrapper for <cx-separator> -->
+<script lang="ts">
+  export let id: string;
+  export let variant: string | undefined = undefined;
+  export let orientation: string | undefined = undefined;
+  export let size: string | undefined = undefined;
+  export let label: string | undefined = undefined;
+  export let semantic: boolean | undefined = undefined;
+  export let color: string | undefined = undefined;
+
+</script>
+
+<cx-separator
+    id={id}
+    variant={variant}
+    orientation={orientation}
+    size={size}
+    label={label}
+    semantic={semantic || undefined}
+    color={color}
+
+>
+  <slot />
+</cx-separator>

package/src/separator.svelte.d.ts

@@ -0,0 +1,18 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import { SvelteComponent } from 'svelte';
+
+export interface SeparatorProps {
+    id: string;
+    variant?: string;
+    orientation?: string;
+    size?: string;
+    label?: string;
+    semantic?: boolean;
+    color?: string;
+}
+
+export interface SeparatorEvents {
+
+}
+
+export default class Separator extends SvelteComponent<SeparatorProps, SeparatorEvents> {}

package/src/sidebar.svelte

@@ -0,0 +1,65 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-sidebar> -->
+<script lang="ts">
+  import type { CloseDetail, NavigateDetail, SidebarGroup } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  groups?: SidebarGroup[] | string;
+  separatorsAfter?: string;
+  side?: 'left' | 'right';
+  state?: 'expanded' | 'narrow' | 'hidden';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  onClose?: (event: CustomEvent<CloseDetail>) => void;
+  onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
+  header?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+  }
+
+  let { id, label, groups, separatorsAfter, side, state, shape, size, onClose, onNavigate, header, footer }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $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) => onClose?.(e as CustomEvent);
+    el.addEventListener('cx-close', handler);
+    return () => el.removeEventListener('cx-close', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onNavigate?.(e as CustomEvent);
+    el.addEventListener('cx-navigate', handler);
+    return () => el.removeEventListener('cx-navigate', handler);
+  });
+  /** Opens the mobile sidebar drawer. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the mobile sidebar drawer. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-sidebar
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  separators-after={typeof separatorsAfter === 'object' && separatorsAfter != null ? JSON.stringify(separatorsAfter) : separatorsAfter}
+  side={typeof side === 'object' && side != null ? JSON.stringify(side) : side}
+  state={typeof state === 'object' && state != null ? JSON.stringify(state) : state}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+>
+  {#if header}
+    <div slot="header" style="display:contents">{@render header()}</div>
+  {/if}
+  {#if footer}
+    <div slot="footer" style="display:contents">{@render footer()}</div>
+  {/if}
+</cx-sidebar>

package/src/sidebar.svelte.d.ts

@@ -0,0 +1,26 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CloseDetail, NavigateDetail, SidebarGroup } from './types.js';
+
+interface SidebarProps {
+  id?: string;
+  label?: string;
+  groups?: SidebarGroup[] | string;
+  separatorsAfter?: string;
+  side?: 'left' | 'right';
+  state?: 'expanded' | 'narrow' | 'hidden';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  onClose?: (event: CustomEvent<CloseDetail>) => void;
+  onNavigate?: (event: CustomEvent<NavigateDetail>) => void;
+  header?: import('svelte').Snippet;
+  footer?: import('svelte').Snippet;
+}
+
+declare const Sidebar: Component<SidebarProps, {
+  /** Opens the mobile sidebar drawer. */
+  open(): void;
+  /** Closes the mobile sidebar drawer. */
+  close(): void;
+}>;
+export default Sidebar;

package/src/skeleton.svelte

@@ -0,0 +1,30 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-skeleton> -->
+<script lang="ts">
+
+  interface Props {
+  id?: string;
+  variant?: 'text' | 'circle' | 'rectangular';
+  animation?: 'pulse' | 'wave';
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  lines?: number;
+  }
+
+  let { id, variant, animation, label, size, lines }: Props = $props();
+
+  let el: HTMLElement;
+
+
+
+</script>
+
+<cx-skeleton
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  variant={typeof variant === 'object' && variant != null ? JSON.stringify(variant) : variant}
+  animation={typeof animation === 'object' && animation != null ? JSON.stringify(animation) : animation}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  lines={typeof lines === 'object' && lines != null ? JSON.stringify(lines) : lines}
+/>

package/src/skeleton.svelte.d.ts

@@ -0,0 +1,14 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface SkeletonProps {
+  id?: string;
+  variant?: 'text' | 'circle' | 'rectangular';
+  animation?: 'pulse' | 'wave';
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  lines?: number;
+}
+
+declare const Skeleton: Component<SkeletonProps, {}>;
+export default Skeleton;

package/src/slider.svelte

@@ -0,0 +1,100 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-slider> -->
+<script lang="ts">
+  import type { FocusDetail, KeyboardDetail, SliderDetail } from './types.js';
+
+  interface Props {
+  id?: string;
+  label?: string;
+  ariaLabel?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: 'horizontal' | 'vertical';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showValue?: boolean;
+  valueText?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  unlabeled?: boolean;
+  onInput?: (event: CustomEvent<SliderDetail>) => void;
+  onChange?: (event: CustomEvent) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+  }
+
+  let { id, label, ariaLabel, value, min, max, step, orientation, shape, intent, size, showValue, valueText, helperText, errorText, disabled, unlabeled, onInput, onChange, 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) => 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 range input. */
+  export function focus() { (el as any)?.focus(); }
+</script>
+
+<cx-slider
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  label={typeof label === 'object' && label != null ? JSON.stringify(label) : label}
+  aria-label={typeof ariaLabel === 'object' && ariaLabel != null ? JSON.stringify(ariaLabel) : ariaLabel}
+  min={typeof min === 'object' && min != null ? JSON.stringify(min) : min}
+  max={typeof max === 'object' && max != null ? JSON.stringify(max) : max}
+  step={typeof step === 'object' && step != null ? JSON.stringify(step) : step}
+  orientation={typeof orientation === 'object' && orientation != null ? JSON.stringify(orientation) : orientation}
+  shape={typeof shape === 'object' && shape != null ? JSON.stringify(shape) : shape}
+  intent={typeof intent === 'object' && intent != null ? JSON.stringify(intent) : intent}
+  size={typeof size === 'object' && size != null ? JSON.stringify(size) : size}
+  show-value={showValue || undefined}
+  value-text={typeof valueText === 'object' && valueText != null ? JSON.stringify(valueText) : valueText}
+  helper-text={typeof helperText === 'object' && helperText != null ? JSON.stringify(helperText) : helperText}
+  error-text={typeof errorText === 'object' && errorText != null ? JSON.stringify(errorText) : errorText}
+  disabled={disabled || undefined}
+  unlabeled={unlabeled || undefined}
+/>

package/src/slider.svelte.d.ts

@@ -0,0 +1,35 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { FocusDetail, KeyboardDetail, SliderDetail } from './types.js';
+
+interface SliderProps {
+  id?: string;
+  label?: string;
+  ariaLabel?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: 'horizontal' | 'vertical';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  showValue?: boolean;
+  valueText?: string;
+  helperText?: string;
+  errorText?: string;
+  disabled?: boolean;
+  unlabeled?: boolean;
+  onInput?: (event: CustomEvent<SliderDetail>) => void;
+  onChange?: (event: CustomEvent) => void;
+  onFocus?: (event: CustomEvent<FocusDetail>) => void;
+  onBlur?: (event: CustomEvent<FocusDetail>) => void;
+  onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
+  onKeyup?: (event: CustomEvent<KeyboardDetail>) => void;
+}
+
+declare const Slider: Component<SliderProps, {
+  /** Focuses the range input. */
+  focus(): void;
+}>;
+export default Slider;

package/src/speed-dial.svelte

@@ -0,0 +1,66 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-speed-dial> -->
+<script lang="ts">
+  import type { CollapsibleDetail, MenuActionDetail, SpeedDialAction } from './types.js';
+
+  interface Props {
+  id: string;
+  icon: string;
+  ariaLabel?: string;
+  closeIcon?: string;
+  actions?: SpeedDialAction[] | string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  shape?: 'rounded' | 'pill';
+  size?: 'sm' | 'md' | 'lg';
+  direction?: 'up' | 'down' | 'left' | 'right';
+  backdrop?: boolean;
+  tooltips?: boolean;
+  disabled?: boolean;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+  onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
+  }
+
+  let { id, icon, ariaLabel, closeIcon, actions, variant, shape, size, direction, backdrop, tooltips, disabled, onAction, onChange }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $effect(() => {
+    if (!el) return;
+    if (actions != null) el.setAttribute('actions', typeof actions === 'object' ? JSON.stringify(actions) : String(actions));
+    else el.removeAttribute('actions');
+  });
+  $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);
+  });
+  /** Opens the speed dial action menu. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the speed dial action menu. */
+  export function close() { (el as any)?.close(); }
+  /** Toggles the speed dial action menu. */
+  export function toggle() { (el as any)?.toggle(); }
+</script>
+
+<cx-speed-dial
+  bind:this={el}
+  id={typeof id === 'object' && id != null ? JSON.stringify(id) : id}
+  icon={typeof icon === 'object' && icon != null ? JSON.stringify(icon) : icon}
+  aria-label={typeof ariaLabel === 'object' && ariaLabel != null ? JSON.stringify(ariaLabel) : ariaLabel}
+  close-icon={typeof closeIcon === 'object' && closeIcon != null ? JSON.stringify(closeIcon) : closeIcon}
+  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}
+  direction={typeof direction === 'object' && direction != null ? JSON.stringify(direction) : direction}
+  backdrop={backdrop || undefined}
+  tooltips={tooltips || undefined}
+  disabled={disabled || undefined}
+/>

package/src/speed-dial.svelte.d.ts

@@ -0,0 +1,30 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+import type { CollapsibleDetail, MenuActionDetail, SpeedDialAction } from './types.js';
+
+interface SpeedDialProps {
+  id: string;
+  icon: string;
+  ariaLabel?: string;
+  closeIcon?: string;
+  actions?: SpeedDialAction[] | string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  shape?: 'rounded' | 'pill';
+  size?: 'sm' | 'md' | 'lg';
+  direction?: 'up' | 'down' | 'left' | 'right';
+  backdrop?: boolean;
+  tooltips?: boolean;
+  disabled?: boolean;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+  onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
+}
+
+declare const SpeedDial: Component<SpeedDialProps, {
+  /** Opens the speed dial action menu. */
+  open(): void;
+  /** Closes the speed dial action menu. */
+  close(): void;
+  /** Toggles the speed dial action menu. */
+  toggle(): void;
+}>;
+export default SpeedDial;

package/src/spinner.svelte

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

package/src/spinner.svelte.d.ts

@@ -0,0 +1,12 @@
+// Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT
+import type { Component } from 'svelte';
+
+interface SpinnerProps {
+  id?: string;
+  variant?: 'circle' | 'square';
+  label?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+declare const Spinner: Component<SpinnerProps, {}>;
+export default Spinner;

package/src/split-button.svelte

@@ -0,0 +1,64 @@
+<!-- Auto-generated by scripts/generate-svelte.mjs — DO NOT EDIT -->
+<!-- Svelte 5 wrapper for <cx-split-button> -->
+<script lang="ts">
+  import type { ClickDetail, MenuActionDetail, SplitMenuEntry } from './types.js';
+
+  interface Props {
+  id: string;
+  label: string;
+  entries?: SplitMenuEntry[] | string;
+  variant?: 'filled' | 'outline' | 'ghost';
+  intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+  shape?: 'sharp' | 'rounded' | 'pill';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  iconLeading?: string;
+  disabled?: boolean;
+  primaryDisabled?: boolean;
+  triggerDisabled?: boolean;
+  triggerLabel?: string;
+  onClick?: (event: CustomEvent<ClickDetail>) => void;
+  onAction?: (event: CustomEvent<MenuActionDetail>) => void;
+  }
+
+  let { id, label, entries, variant, intent, shape, size, iconLeading, disabled, primaryDisabled, triggerDisabled, triggerLabel, onClick, onAction }: Props = $props();
+
+  let el: HTMLElement;
+
+
+  $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) => onClick?.(e as CustomEvent);
+    el.addEventListener('cx-click', handler);
+    return () => el.removeEventListener('cx-click', handler);
+  });
+  $effect(() => {
+    if (!el) return;
+    const handler = (e: Event) => onAction?.(e as CustomEvent);
+    el.addEventListener('cx-action', handler);
+    return () => el.removeEventListener('cx-action', handler);
+  });
+  /** Opens the dropdown menu. */
+  export function open() { (el as any)?.open(); }
+  /** Closes the dropdown menu. */
+  export function close() { (el as any)?.close(); }
+</script>
+
+<cx-split-button
+  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}
+  icon-leading={typeof iconLeading === 'object' && iconLeading != null ? JSON.stringify(iconLeading) : iconLeading}
+  disabled={disabled || undefined}
+  primary-disabled={primaryDisabled || undefined}
+  trigger-disabled={triggerDisabled || undefined}
+  trigger-label={typeof triggerLabel === 'object' && triggerLabel != null ? JSON.stringify(triggerLabel) : triggerLabel}
+/>