windmill-components 1.510.1 → 1.511.1

package/package/components/JsonEditor.svelte

@@ -1,16 +1,12 @@
-<script lang="ts">import '@codingame/monaco-vscode-standalone-json-language-features';
+<script lang="ts">import { run } from 'svelte/legacy';
+import '@codingame/monaco-vscode-standalone-json-language-features';
 import SimpleEditor from './SimpleEditor.svelte';
 import { createEventDispatcher } from 'svelte';
 import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
 import Button from './common/button/Button.svelte';
-export let code;
-export let value = undefined;
-export let error = '';
-export let editor = undefined;
-export let small = false;
-export let loadAsync = false;
-$: tooBig = code && code?.length > 1000000;
-let loadTooBigAnyway = false;
+let { code = $bindable(), value = $bindable(undefined), error = $bindable(), editor = $bindable(undefined), small = false, loadAsync = false, class: clazz = undefined, disabled = false, fixedOverflowWidgets = true } = $props();
+let tooBig = $derived(code && code?.length > 1000000);
+let loadTooBigAnyway = $state(false);
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function parseJson() {
@@ -28,7 +24,9 @@ function parseJson() {
         error = e.message;
     }
 }
-$: code != undefined && parseJson();
+run(() => {
+    code != undefined && parseJson();
+});
 </script>
 
 {#if tooBig && !loadTooBigAnyway}
@@ -51,7 +49,9 @@ $: code != undefined && parseJson();
 				autoHeight
 				lang="json"
 				bind:code
-				class={$$props.class}
+				class={clazz}
+				{disabled}
+				{fixedOverflowWidgets}
 			/>
 		</div>
 		{#if error != ''}

package/package/components/JsonEditor.svelte.d.ts

@@ -1,5 +1,16 @@
-import { SvelteComponent } from "svelte";
 import '@codingame/monaco-vscode-standalone-json-language-features';
+import SimpleEditor from './SimpleEditor.svelte';
+interface Props {
+    code: string | undefined;
+    value?: any;
+    error?: string;
+    editor?: SimpleEditor | undefined;
+    small?: boolean;
+    loadAsync?: boolean;
+    class?: string | undefined;
+    disabled?: boolean;
+    fixedOverflowWidgets?: boolean;
+}
 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;
@@ -13,65 +24,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const JsonEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    code: string | undefined;
-    value?: any;
-    error?: string | undefined;
-    editor?: (SvelteComponent<{
-        lang: string;
-        code?: string;
-        hash?: string;
-        cmdEnterAction?: () => void;
-        formatAction?: () => void;
-        automaticLayout?: boolean;
-        extraLib?: string;
-        placeholder?: string;
-        disableSuggestions?: boolean;
-        disableLinting?: boolean;
-        hideLineNumbers?: boolean;
-        shouldBindKey?: boolean;
-        autoHeight?: boolean;
-        fixedOverflowWidgets?: boolean;
-        small?: boolean;
-        domLib?: boolean;
-        autofocus?: boolean;
-        allowVim?: boolean;
-        tailwindClasses?: string[];
-        class?: string;
-        loadAsync?: boolean;
-        initialCursorPos?: import("monaco-editor").IPosition;
-        key?: string;
-    }, {
-        change: CustomEvent<any>;
-        focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    }, {}> & {
-        $$bindings?: "code" | undefined;
-    } & {
-        getCode: () => string;
-        insertAtCursor: (code: string) => void;
-        setCode: (ncode: string, formatCode?: boolean) => void;
-        formatCode: () => void;
-        format: () => void;
-        focus: () => void;
-        getSelectedLines: () => string | undefined;
-        onDidChangeCursorSelection: (f: (e: import("monaco-editor").editor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined;
-        show: () => void;
-        hide: () => void;
-        setSuggestion: (value: string) => void;
-        setCursorToEnd: () => void;
-    }) | undefined;
-    small?: boolean | undefined;
-    loadAsync?: boolean | undefined;
-}, {
+declare const JsonEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value" | "error" | "code" | "editor">;
 type JsonEditor = InstanceType<typeof JsonEditor>;
 export default JsonEditor;

package/package/components/Label.svelte

@@ -1,14 +1,9 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import Required from './Required.svelte';
-export let label = undefined;
-export let primary = false;
-export let disabled = false;
-export let headless = false;
-export let required = false;
-export let headerClass = '';
+let { label = undefined, primary = false, disabled = false, headless = false, required = false, headerClass = '', class: clazz = undefined, header, error, action, children } = $props();
 </script>
 
-<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
+<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', clazz)}>
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
 			<div class={twMerge('flex flex-row items-center gap-2', headerClass)}>
@@ -19,11 +14,11 @@ export let headerClass = '';
 						<Required required={true} />
 					{/if}
 				</span>
-				<slot name="header" />
+				{@render header?.()}
 			</div>
 		{/if}
-		<slot name="error" />
-		<slot name="action" />
+		{@render error?.()}
+		{@render action?.()}
 	</div>
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/Label.svelte.d.ts

@@ -1,41 +1,16 @@
-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 {
+    label?: string | undefined;
+    primary?: boolean;
+    disabled?: boolean;
+    headless?: boolean;
+    required?: boolean;
+    headerClass?: string;
+    class?: string | undefined;
+    header?: import('svelte').Snippet;
+    error?: import('svelte').Snippet;
+    action?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    label?: string | undefined | undefined;
-    primary?: boolean | undefined;
-    disabled?: boolean | undefined;
-    headless?: boolean | undefined;
-    required?: boolean | undefined;
-    headerClass?: string | undefined;
-}, {
-    header: {};
-    error: {};
-    action: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    error: {};
-    action: {};
-    default: {};
-}, {}, string>;
-type Label = InstanceType<typeof Label>;
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
 export default Label;

package/package/components/NumberTypeNarrowing.svelte

@@ -2,24 +2,21 @@
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { selectOptions } from './apps/editor/component';
-export let min;
-export let max;
-export let currency;
-export let currencyLocale;
-let minChecked = min != undefined;
-let maxChecked = max != undefined;
+let { min = $bindable(), max = $bindable(), currency = $bindable(), currencyLocale = $bindable() } = $props();
+let minChecked = $state(min != undefined);
+let maxChecked = $state(max != undefined);
 </script>
 
 <div class="flex flex-col gap-2">
 	<div class="grid grid-cols-2 gap-4">
 		<Label label="Min" class="w-full col-span-1">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light small>
 					Set a minimum value for the number. If both min and max are set, the input will render as
 					a range slider.
 				</Tooltip>
-			</svelte:fragment>
-			<svelte:fragment slot="action">
+			{/snippet}
+			{#snippet action()}
 				<Toggle
 					bind:checked={minChecked}
 					on:change={(e) => {
@@ -32,17 +29,17 @@ let maxChecked = max != undefined;
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			</svelte:fragment> <input type="number" bind:value={min} disabled={!minChecked} />
+			{/snippet} <input type="number" bind:value={min} disabled={!minChecked} />
 		</Label>
 
 		<Label label="Max" class="w-full col-span-1 ">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light small>
 					Set a maximum value for the number. If both min and max are set, the input will render as
 					a range slider.
 				</Tooltip>
-			</svelte:fragment>
-			<svelte:fragment slot="action">
+			{/snippet}
+			{#snippet action()}
 				<Toggle
 					bind:checked={maxChecked}
 					on:change={(e) => {
@@ -55,18 +52,18 @@ let maxChecked = max != undefined;
 					options={{ right: 'Enabled' }}
 					size="xs"
 				/>
-			</svelte:fragment>
+			{/snippet}
 			<input type="number" bind:value={max} disabled={!maxChecked} />
 		</Label>
 	</div>
 	<div class="grid grid-cols-3 gap-4">
 		<Label label="Currency" class="w-full col-span-2">
-			<svelte:fragment slot="header">
+			{#snippet header()}
 				<Tooltip light small>
 					Select a currency to display the number in. If a currency is selected, you can also select
 					a locale to format the number according to that locale.
 				</Tooltip>
-			</svelte:fragment>
+			{/snippet}
 			<select bind:value={currency}>
 				<option value={undefined}> No currency </option>
 				{#each selectOptions.currencyOptions as c}

package/package/components/NumberTypeNarrowing.svelte.d.ts

@@ -1,23 +1,9 @@
-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;
-}
-declare const NumberTypeNarrowing: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     min: number | undefined;
     max: number | undefined;
     currency: string | undefined;
     currencyLocale: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NumberTypeNarrowing = InstanceType<typeof NumberTypeNarrowing>;
+}
+declare const NumberTypeNarrowing: import("svelte").Component<Props, {}, "currency" | "min" | "max" | "currencyLocale">;
+type NumberTypeNarrowing = ReturnType<typeof NumberTypeNarrowing>;
 export default NumberTypeNarrowing;

package/package/components/ResourceTypePicker.svelte

@@ -8,10 +8,9 @@ import { offset, flip, shift } from 'svelte-floating-ui/dom';
 import Label from './Label.svelte';
 import Tooltip from './Tooltip.svelte';
 import Badge from './common/badge/Badge.svelte';
-export let value;
-export let notPickable = false;
-export let nonePickable = false;
-let resources = [];
+import { untrack } from 'svelte';
+let { value = $bindable(), notPickable = false, nonePickable = false } = $props();
+let resources = $state([]);
 async function loadResources() {
     resources = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
 }
@@ -20,19 +19,23 @@ function onClick(resource) {
     value = resource;
     dispatch('click', resource);
 }
-$: if ($workspaceStore) {
-    loadResources();
-}
-let search = '';
-$: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.toLowerCase()));
+$effect(() => {
+    if ($workspaceStore) {
+        untrack(() => {
+            loadResources();
+        });
+    }
+});
+let search = $state('');
+let filteredResources = $derived(resources.filter((r) => r.toLowerCase().includes(search.toLowerCase())));
 </script>
 
 <Label label="Resource type" class="w-full col-span-2">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip light small>Select a resource type to narrow down the object type.</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
-	<svelte:fragment slot="action">
+	{#snippet action()}
 		<div class="flex flex-row gap-1">
 			<Button
 				size="xs"
@@ -50,10 +53,10 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 				}}
 				contentClasses="flex flex-col gap-2 h-full p-4 max-h-[40vh] w-[500px]"
 			>
-				<svelte:fragment slot="trigger">
+				{#snippet trigger()}
 					<Button nonCaptureEvent size="xs" color="dark">Select resource type</Button>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
+				{/snippet}
+				{#snippet content({ close })}
 					<ClearableInput bind:value={search} placeholder="Search resource..." />
 
 					<div class="overflow-y-scroll h-full">
@@ -98,10 +101,10 @@ $: filteredResources = resources.filter((r) => r.toLowerCase().includes(search.t
 							{/if}
 						</div>
 					</div>
-				</svelte:fragment>
+				{/snippet}
 			</Popover>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 	<div class="flex flex-row items-center w-full justify-between">
 		<Badge color={!value ? 'gray' : 'blue'}>
 			{value ?? 'None'}

package/package/components/ResourceTypePicker.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    value: string | undefined;
+    notPickable?: boolean;
+    nonePickable?: boolean;
+}
 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 +16,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ResourceTypePicker: $$__sveltets_2_IsomorphicComponent<{
-    value: string | undefined;
-    notPickable?: boolean;
-    nonePickable?: boolean;
-}, {
+declare const ResourceTypePicker: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value">;
 type ResourceTypePicker = InstanceType<typeof ResourceTypePicker>;
 export default ResourceTypePicker;

package/package/components/Section.svelte

@@ -3,18 +3,7 @@ import { AlertTriangle, ChevronRight } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
 import { slide } from 'svelte/transition';
-export let label = undefined;
-export let tooltip = undefined;
-export let documentationLink = undefined;
-export let eeOnly = false;
-export let small = false;
-export let wrapperClass = '';
-export let headerClass = '';
-export let collapsable = false;
-export let collapsed = true;
-export let headless = false;
-export let animate = false;
-export let breakAll = false;
+let { label = undefined, tooltip = undefined, documentationLink = undefined, eeOnly = false, small = false, wrapperClass = '', headerClass = '', collapsable = false, collapsed = $bindable(true), headless = false, animate = false, breakAll = false, class: clazz = undefined, header, action, badge, children } = $props();
 </script>
 
 <div class={twMerge('w-full flex flex-col', wrapperClass)}>
@@ -29,7 +18,7 @@ export let breakAll = false;
 				)}
 			>
 				{#if collapsable}
-					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
+					<button class="flex items-center gap-1" onclick={() => (collapsed = !collapsed)}>
 						<ChevronRight
 							size={16}
 							class={twMerge(
@@ -44,11 +33,9 @@ export let breakAll = false;
 					{label}
 				{/if}
 
-				<slot name="header" />
+				{@render header?.()}
 				{#if tooltip}
 					<Tooltip {documentationLink}>{tooltip}</Tooltip>
-				{:else if $$slots.tooltip}
-					<slot name="tooltip" />
 				{/if}
 				{#if eeOnly}
 					{#if !$enterpriseLicense}
@@ -59,18 +46,18 @@ export let breakAll = false;
 					{/if}
 				{/if}
 			</h2>
-			<slot name="action" />
+			{@render action?.()}
 			{#if collapsable && collapsed}
-				<slot name="badge" />
+				{@render badge?.()}
 			{/if}
 		</div>
 	{/if}
 	{#if !collapsable || !collapsed}
 		<div
-			class={twMerge('grow min-h-0', $$props.class)}
+			class={twMerge('grow min-h-0', clazz)}
 			transition:slide={animate ? { duration: 200 } : { duration: 0 }}
 		>
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 </div>

package/package/components/Section.svelte.d.ts

@@ -1,49 +1,22 @@
-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 {
+    label?: string | undefined;
+    tooltip?: string | undefined;
+    documentationLink?: string | undefined;
+    eeOnly?: boolean;
+    small?: boolean;
+    wrapperClass?: string;
+    headerClass?: string;
+    collapsable?: boolean;
+    collapsed?: boolean;
+    headless?: boolean;
+    animate?: boolean;
+    breakAll?: boolean;
+    class?: string | undefined;
+    header?: import('svelte').Snippet;
+    action?: import('svelte').Snippet;
+    badge?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Section: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    label?: string | undefined | undefined;
-    tooltip?: string | undefined | undefined;
-    documentationLink?: string | undefined | undefined;
-    eeOnly?: boolean | undefined;
-    small?: boolean | undefined;
-    wrapperClass?: string | undefined;
-    headerClass?: string | undefined;
-    collapsable?: boolean | undefined;
-    collapsed?: boolean | undefined;
-    headless?: boolean | undefined;
-    animate?: boolean | undefined;
-    breakAll?: boolean | undefined;
-}, {
-    header: {};
-    tooltip: {};
-    action: {};
-    badge: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    tooltip: {};
-    action: {};
-    badge: {};
-    default: {};
-}, {}, string>;
-type Section = InstanceType<typeof Section>;
+declare const Section: import("svelte").Component<Props, {}, "collapsed">;
+type Section = ReturnType<typeof Section>;
 export default Section;

package/package/components/SimpleEditor.svelte

@@ -89,7 +89,7 @@ let suggestion = $state('');
 let placeholderVisible = $state(false);
 let mounted = $state(false);
 let valueAfterDispose = undefined;
-let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key } = $props();
+let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false } = $props();
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 export function getCode() {
@@ -546,9 +546,9 @@ updatePlaceholderVisibility(code ?? '');
 
 <div
 	bind:this={divEl}
-	class="relative {className} {!editor ? 'hidden' : ''} editor simple-editor {!allowVim
-		? 'nonmain-editor'
-		: ''}"
+	class="relative {className} {!editor ? 'hidden' : ''} editor {disabled
+		? 'disabled'
+		: ''} simple-editor {!allowVim ? 'nonmain-editor' : ''}"
 	bind:clientWidth={width}
 >
 	{#if placeholder}

package/package/components/SimpleEditor.svelte.d.ts

@@ -28,6 +28,7 @@ type $$ComponentProps = {
     loadAsync?: boolean;
     initialCursorPos?: IPosition;
     key?: string;
+    disabled?: boolean;
 };
 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> & {

package/package/components/SqlRepl.svelte

@@ -135,7 +135,6 @@ let editor = $state(null);
 			<Module.default
 				bind:this={editor}
 				bind:code
-				lang="sql"
 				scriptLang="mysql"
 				class="w-full h-full"
 				cmdEnterAction={run}

package/package/components/Subsection.svelte

@@ -2,12 +2,10 @@
 import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
-export let label = undefined;
-export let tooltip = undefined;
-export let eeOnly = false;
-export let collapsable = false;
-export let collapsed = true;
-export let headless = false;
+let { label = undefined, tooltip = undefined, eeOnly = false, collapsable = false, collapsed = $bindable(true), openInitially = false, headless = false, class: clazz = undefined, header, action, badge, children } = $props();
+if (openInitially && collapsable && collapsed) {
+    collapsed = false;
+}
 </script>
 
 <div class="w-full">
@@ -15,7 +13,7 @@ export let headless = false;
 		<div class="flex flex-row justify-between items-center mb-1">
 			<h3 class={twMerge('font-semibold flex flex-row items-center gap-2', 'text-sm')}>
 				{#if collapsable}
-					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
+					<button class="flex items-center gap-1" onclick={() => (collapsed = !collapsed)}>
 						{#if collapsed}
 							<ChevronRight size={16} />
 						{:else}
@@ -27,7 +25,7 @@ export let headless = false;
 					{label}
 				{/if}
 
-				<slot name="header" />
+				{@render header?.()}
 				{#if tooltip}
 					<Tooltip>{tooltip}</Tooltip>
 				{/if}
@@ -40,13 +38,13 @@ export let headless = false;
 					{/if}
 				{/if}
 			</h3>
-			<slot name="action" />
+			{@render action?.()}
 			{#if collapsable && collapsed}
-				<slot name="badge" />
+				{@render badge?.()}
 			{/if}
 		</div>
 	{/if}
-	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
-		<slot />
+	<div class={collapsable && collapsed ? `hidden ${clazz ?? ''}` : `${clazz ?? ''}`}>
+		{@render children?.()}
 	</div>
 </div>