windmill-components 1.642.0 → 1.655.0

package/package/components/common/button/AnimatedButton.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">import AnimatedButtonInner from './AnimatedButtonInner.svelte';
-export let marginWidth = '2px';
-export let animationDuration = '2s';
-export let baseRadius = '4px';
-export let animate = true;
-export let wrapperClasses = '';
-export let ringColor = 'transparent';
-export let darkMode = false;
+let { marginWidth = '2px', animationDuration = '2s', baseRadius = '4px', animate = true, wrapperClasses = '', ringColor = 'transparent', darkMode = false, children } = $props();
 </script>
 
 {#if animate}
@@ -18,10 +12,10 @@ export let darkMode = false;
 		{ringColor}
 		{darkMode}
 	>
-		<slot />
+		{@render children?.()}
 	</AnimatedButtonInner>
 {:else}
 	<div class={wrapperClasses}>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}

package/package/components/common/button/AnimatedButton.svelte.d.ts

@@ -1,22 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const AnimatedButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     marginWidth?: string;
     animationDuration?: string;
     baseRadius?: string;
@@ -24,12 +6,8 @@ declare const AnimatedButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_
     wrapperClasses?: string;
     ringColor?: string;
     darkMode?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type AnimatedButton = InstanceType<typeof AnimatedButton>;
+    children?: import('svelte').Snippet;
+}
+declare const AnimatedButton: import("svelte").Component<Props, {}, "">;
+type AnimatedButton = ReturnType<typeof AnimatedButton>;
 export default AnimatedButton;

package/package/components/common/button/AnimatedButtonInner.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
-export let marginWidth = '2px';
-export let animationDuration = '2s';
-export let baseRadius = '4px';
-export let animate = true;
-export let wrapperClasses = '';
-export let ringColor = 'transparent';
-export let darkMode = false;
+let { marginWidth = '2px', animationDuration = '2s', baseRadius = '4px', animate = true, wrapperClasses = '', ringColor = 'transparent', darkMode = $bindable(false), children } = $props();
 const gradientColors = {
     light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
     dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
 };
-let clientWidth = 0;
-let clientHeight = 0;
-$: circleRadius = Math.ceil(Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2);
-$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`;
+let clientWidth = $state(0);
+let clientHeight = $state(0);
+let circleRadius = $derived(Math.ceil(Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2));
+let gradientString = $derived(`from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`);
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -26,7 +20,7 @@ $: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].jo
 	bind:clientWidth
 	bind:clientHeight
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/package/components/common/button/AnimatedButtonInner.svelte.d.ts

@@ -1,22 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const AnimatedButtonInner: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     marginWidth?: string;
     animationDuration?: string;
     baseRadius?: string;
@@ -24,12 +6,8 @@ declare const AnimatedButtonInner: $$__sveltets_2_IsomorphicComponent<$$__svelte
     wrapperClasses?: string;
     ringColor?: string;
     darkMode?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type AnimatedButtonInner = InstanceType<typeof AnimatedButtonInner>;
+    children?: import('svelte').Snippet;
+}
+declare const AnimatedButtonInner: import("svelte").Component<Props, {}, "darkMode">;
+type AnimatedButtonInner = ReturnType<typeof AnimatedButtonInner>;
 export default AnimatedButtonInner;

package/package/components/common/button/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { ButtonType } from './model';
 import { twMerge } from 'tailwind-merge';
 import Dropdown from '../../DropdownV2.svelte';
@@ -135,14 +135,14 @@ let lucideIconSize = $derived(extendedSize
     : unifiedSize
         ? ButtonType.UnifiedIconSizes[unifiedSize]
         : (iconMap[size] ?? 12));
-const { elements: { trigger, content }, states: { open }, options: { openDelay } } = tooltipPopover
+const { elements: { trigger, content }, states: { open }, options: { openDelay } } = untrack(() => tooltipPopover)
     ? createTooltip({
         positioning: {
-            placement: tooltipPopover?.placement
+            placement: untrack(() => tooltipPopover)?.placement
         },
-        closeDelay: tooltipPopover?.closeDelay,
+        closeDelay: untrack(() => tooltipPopover)?.closeDelay,
         group: true,
-        portal: tooltipPopover?.portal
+        portal: untrack(() => tooltipPopover)?.portal
     })
     : {
         elements: { trigger: undefined, content: undefined },

package/package/components/common/button/PulseButton.svelte

@@ -1,26 +1,22 @@
-<script>
-	export let pulseDuration = 2
-	export let numberOfPulses = 3
-	export let scale = 1.2
-
-	let isPulsing = false
-	let pulseCount = 1
-
-	export function triggerPulse(count) {
-		if (pulseCount < 1) return
-		if (!isPulsing) {
-			pulseCount = count
-			isPulsing = true
-			setTimeout(() => {
-				isPulsing = false
-			}, pulseDuration * count * 1000)
-		}
-	}
+<script lang="ts">let { pulseDuration = 2, numberOfPulses = 3, scale = 1.2, children } = $props();
+let isPulsing = $state(false);
+let pulseCount = $state(1);
+export function triggerPulse(count) {
+    if (pulseCount < 1)
+        return;
+    if (!isPulsing) {
+        pulseCount = count;
+        isPulsing = true;
+        setTimeout(() => {
+            isPulsing = false;
+        }, pulseDuration * count * 1000);
+    }
+}
 </script>
 
 <div class="relative">
 	<div>
-		<slot />
+		{@render children?.()}
 	</div>
 	{#each Array(numberOfPulses) as _, i}
 		<div

package/package/components/common/button/PulseButton.svelte.d.ts

@@ -1,49 +1,11 @@
-export default PulseButton;
-type PulseButton = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    scale?: number | undefined;
-    pulseDuration?: number | undefined;
-    numberOfPulses?: number | undefined;
-    triggerPulse?: ((count: any) => void) | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-} & {
-    triggerPulse: (count: any) => void;
-};
-declare const PulseButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    scale?: number | undefined;
-    pulseDuration?: number | undefined;
-    numberOfPulses?: number | undefined;
-    triggerPulse?: ((count: any) => void) | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    triggerPulse: (count: any) => void;
-}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    pulseDuration?: number;
+    numberOfPulses?: number;
+    scale?: number;
+    children?: import('svelte').Snippet;
 }
+declare const PulseButton: import("svelte").Component<Props, {
+    triggerPulse: (count: any) => void;
+}, "">;
+type PulseButton = ReturnType<typeof PulseButton>;
+export default PulseButton;

package/package/components/common/button/RefreshButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Button, ButtonType } from '..';
 import { RefreshCw } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
-let { loading, size = 'md', onClick } = $props();
+let { loading, size = 'md', onClick, variant = 'subtle' } = $props();
 let buttonHover = $state(false);
 </script>
 
@@ -11,7 +11,8 @@ let buttonHover = $state(false);
 		on:mouseleave={() => (buttonHover = false)}
 		color="light"
 		unifiedSize={size}
-		variant="subtle"
+		{variant}
+		iconOnly
 		{onClick}
 		startIcon={{ icon: RefreshCw, props: { class: loading ? 'animate-spin' : '' } }}
 	></Button>

package/package/components/common/button/RefreshButton.svelte.d.ts

@@ -2,7 +2,7 @@ import { ButtonType } from '..';
 interface Props {
     loading: boolean;
     size?: ButtonType.UnifiedSize;
-    light?: boolean;
+    variant?: ButtonType.Variant;
     onClick?: () => void;
 }
 declare const RefreshButton: import("svelte").Component<Props, {}, "">;

package/package/components/common/button/RoundIconButton.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">export let color = 'light';
-export let border = false;
-$: colorClasses = {
+<script lang="ts">"use strict";
+let { color = 'light', border = false, children } = $props();
+let colorClasses = $derived({
     light: 'text-primary bg-surface hover:bg-surface-hover text-primary',
     dark: 'text-primary hover:bg-surface-hover-dark text-primary'
-}[color ?? 'light'];
+}[color ?? 'light']);
 </script>
 
 <div class="rounded-full p-1 {colorClasses} {border ? 'border border-tertiary' : ''}">
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/common/button/RoundIconButton.svelte.d.ts

@@ -1,30 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const RoundIconButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    color?: "light" | "dark" | undefined;
+interface Props {
+    color?: 'light' | 'dark' | undefined;
     border?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type RoundIconButton = InstanceType<typeof RoundIconButton>;
+    children?: import('svelte').Snippet;
+}
+declare const RoundIconButton: import("svelte").Component<Props, {}, "">;
+type RoundIconButton = ReturnType<typeof RoundIconButton>;
 export default RoundIconButton;

package/package/components/common/button/UndoRedo.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { Redo, Undo } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { Button } from '..';
-export let undoProps = {};
-export let redoProps = {};
+let { undoProps = {}, redoProps = {} } = $props();
 const dispatch = createEventDispatcher();
 </script>
 

package/package/components/common/button/UndoRedo.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    undoProps?: Record<string, any>;
+    redoProps?: Record<string, any>;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,14 +15,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const UndoRedo: $$__sveltets_2_IsomorphicComponent<{
-    undoProps?: Record<string, any>;
-    redoProps?: Record<string, any>;
-}, {
+declare const UndoRedo: $$__sveltets_2_IsomorphicComponent<Props, {
     undo: CustomEvent<any>;
     redo: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type UndoRedo = InstanceType<typeof UndoRedo>;
 export default UndoRedo;

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -1,16 +1,13 @@
-<script lang="ts">import { Calendar } from 'lucide-svelte';
+<script lang="ts">import { createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import { Calendar } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Popover from '../../meltComponents/Popover.svelte';
 import DateTimeInput from '../../DateTimeInput.svelte';
 import { twMerge } from 'tailwind-merge';
-export let date;
-export let label;
-export let useDropdown = false;
-export let clearable = false;
-export let target = undefined;
 const dispatch = createEventDispatcher();
 let input;
-export let placement = 'top-end';
+let { date = $bindable(), label, useDropdown = false, clearable = false, target = undefined, placement = 'top-end', class: className = '' } = $props();
 </script>
 
 <Popover
@@ -18,42 +15,46 @@ export let placement = 'top-end';
 	portal={target}
 	contentClasses="p-4"
 >
-	<svelte:fragment slot="trigger">
-		<button
-			title="Open calendar picker"
-			class={twMerge(
-				'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2.5 items-center text-primary bg-surface-secondary rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
-				$$props.class
-			)}
-			aria-label="Open calendar picker"
-			on:click={() => {
+	{#snippet trigger()}
+	
+			<button
+				title="Open calendar picker"
+				class={twMerge(
+					'absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2.5 items-center text-primary bg-surface-secondary rounded center-center hover:bg-surface-hover transition-all cursor-pointer',
+					className
+				)}
+				aria-label="Open calendar picker"
+				onclick={() => {
 				input?.focus()
 			}}
-		>
-			<Calendar size={14} />
-		</button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<!-- svelte-ignore a11y-label-has-associated-control -->
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<label class="block text-primary">
-			<div class="pb-1 text-sm text-secondary">{label}</div>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div on:click|stopPropagation class="flex w-full">
-				<DateTimeInput
-					{clearable}
-					{useDropdown}
-					value={date}
-					on:change={(e) => {
-						date = e.detail
-						dispatch('change', date)
-					}}
-					on:clear={() => {
-						dispatch('clear')
-					}}
-				/>
-			</div>
-		</label>
-	</svelte:fragment>
+			>
+				<Calendar size={14} />
+			</button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<label class="block text-primary">
+				<div class="pb-1 text-sm text-secondary">{label}</div>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div onclick={stopPropagation(bubble('click'))} class="flex w-full">
+					<DateTimeInput
+						{clearable}
+						{useDropdown}
+						value={date}
+						on:change={(e) => {
+							date = e.detail
+							dispatch('change', date)
+						}}
+						on:clear={() => {
+							dispatch('clear')
+						}}
+					/>
+				</div>
+			</label>
+		
+	{/snippet}
 </Popover>

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -1,4 +1,13 @@
 import type { Placement } from '@floating-ui/core';
+interface Props {
+    date: string | null | undefined;
+    label: string;
+    useDropdown?: boolean;
+    clearable?: boolean;
+    target?: string | HTMLElement | undefined;
+    placement?: Placement;
+    class?: string;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,20 +21,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CalendarPicker: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    date: string | null | undefined;
-    label: string;
-    useDropdown?: boolean | undefined;
-    clearable?: boolean | undefined;
-    target?: string | HTMLElement | undefined;
-    placement?: Placement | undefined;
-}, {
-    click: PointerEvent;
+declare const CalendarPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
     clear: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "date">;
 type CalendarPicker = InstanceType<typeof CalendarPicker>;
 export default CalendarPicker;

package/package/components/common/clearableInput/ClearableInput.svelte

@@ -1,33 +1,34 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { run, createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+const bubble = createBubbler();
+import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 import { X } from 'lucide-svelte';
 import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
-export let value = '';
-export let placeholder = '';
-export let type = 'text';
-export let inputClass = '';
-export let wrapperClass = '';
-export let buttonClass = '';
+let { value = $bindable(''), placeholder = '', type = 'text', inputClass = '', wrapperClass = '', buttonClass = '', children, ...rest } = $props();
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-let isHovered = false;
-$: isNumeric = ['number', 'range'].includes(type);
-$: dispatchIfMounted('change', value);
+let isHovered = $state(false);
+let isNumeric = $derived(['number', 'range'].includes(type));
+run(() => {
+    dispatchIfMounted('change', value);
+});
 function handleInput(e) {
     value = isNumeric ? +e.target.value : e.target.value;
 }
 function clear() {
     value = '';
 }
-$: if (value === undefined)
-    value = '';
+run(() => {
+    if (value === undefined)
+        value = '';
+});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="relative grow {wrapperClass}"
-	on:mouseenter={() => (isHovered = true)}
-	on:mouseleave={() => (isHovered = false)}
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
 >
 	{#if type === 'textarea'}
 		<textarea
@@ -35,11 +36,11 @@ $: if (value === undefined)
 			{placeholder}
 			rows="1"
 			class="resize-y {inputClass}"
-			{...$$restProps}
-			on:input={handleInput}
-			on:keydown|stopPropagation
-			on:focus
-			on:blur
+			{...rest}
+			oninput={handleInput}
+			onkeydown={stopPropagation(bubble('keydown'))}
+			onfocus={bubble('focus')}
+			onblur={bubble('blur')}
 		></textarea>
 	{:else}
 		<input
@@ -47,11 +48,11 @@ $: if (value === undefined)
 			{value}
 			{placeholder}
 			class=" {(value ? '!pr-[26px] ' : '') + inputClass}"
-			{...$$restProps}
-			on:input={handleInput}
-			on:keydown|stopPropagation
-			on:focus
-			on:blur
+			{...rest}
+			oninput={handleInput}
+			onkeydown={stopPropagation(bubble('keydown'))}
+			onfocus={bubble('focus')}
+			onblur={bubble('blur')}
 		/>
 	{/if}
 	{#if value && isHovered}
@@ -60,10 +61,10 @@ $: if (value === undefined)
 			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-primary bg-surface-secondary
 			 hover:bg-surface-hover focus:bg-surface-hover {buttonClass}"
 			aria-label="Clear"
-			on:click|preventDefault|stopPropagation={clear}
+			onclick={stopPropagation(preventDefault(clear))}
 		>
 			<X size={11} class="" />
 		</button>
 	{/if}
-	<slot />
+	{@render children?.()}
 </div>