@kayord/ui 0.11.1 → 0.12.0

package/dist/components/ui/avatar/avatar.svelte

@@ -2,17 +2,11 @@
 	import { Avatar as AvatarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = AvatarPrimitive.Props;
-
-	let className: $$Props["class"] = undefined;
-	export let delayMs: $$Props["delayMs"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.RootProps = $props();
 </script>
 
 <AvatarPrimitive.Root
-	{delayMs}
-	class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-	{...$$restProps}
->
-	<slot />
-</AvatarPrimitive.Root>
+	bind:ref
+	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar.svelte.d.ts

@@ -1,28 +1,3 @@
 import { Avatar as AvatarPrimitive } from "bits-ui";
-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 Avatar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<AvatarPrimitive.Props, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Avatar = InstanceType<typeof Avatar>;
+declare const Avatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref">;
 export default Avatar;

package/dist/components/ui/badge/badge.svelte

@@ -1,13 +1,47 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
 <script lang="ts">
-	import { type Variant, badgeVariants } from "./index.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	let className: string | undefined | null = undefined;
-	export let href: string | undefined = undefined;
-	export let variant: Variant = "default";
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
 </script>
 
-<svelte:element this={href ? "a" : "span"} {href} class={cn(badgeVariants({ variant, className }))} {...$$restProps}>
-	<slot />
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...restProps}
+>
+	{@render children?.()}
 </svelte:element>

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -1,33 +1,59 @@
-import { type Variant } from "./index.js";
-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;
+import { type VariantProps } from "tailwind-variants";
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
     };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    href?: string | undefined;
-    variant?: Variant;
-    class?: string | undefined | null;
 }, {
-    default: {};
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
 }>, {
-    [evt: string]: CustomEvent<any>;
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
 }, {
-    default: {};
-}, {}, string>;
-type Badge = InstanceType<typeof Badge>;
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+import type { HTMLAnchorAttributes } from "svelte/elements";
+declare const Badge: import("svelte").Component<HTMLAnchorAttributes & {
+    ref?: HTMLElement | null | undefined;
+} & {
+    variant?: BadgeVariant;
+}, {}, "ref">;
 export default Badge;

package/dist/components/ui/badge/index.d.ts

@@ -1,53 +1,2 @@
-import { type VariantProps } from "tailwind-variants";
 export { default as Badge } from "./badge.svelte";
-export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, undefined, "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}>, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, undefined, "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}>, unknown, unknown, undefined>>;
-export type Variant = VariantProps<typeof badgeVariants>["variant"];
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/dist/components/ui/badge/index.js

@@ -1,16 +1,2 @@
-import { tv } from "tailwind-variants";
 export { default as Badge } from "./badge.svelte";
-export const badgeVariants = tv({
-    base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-            outline: "text-foreground",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
+export { badgeVariants } from "./badge.svelte";

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,24 +1,23 @@
 <script lang="ts">
 	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement> & {
-		el?: HTMLSpanElement;
-	};
-
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span
-	bind:this={el}
+	bind:this={ref}
 	role="presentation"
 	aria-hidden="true"
-	class={cn("flex h-9 w-9 items-center justify-center", className)}
-	{...$$restProps}
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
 >
-	<Ellipsis class="h-4 w-4" />
+	<Ellipsis class="size-4" />
 	<span class="sr-only">More</span>
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte.d.ts

@@ -1,21 +1,4 @@
+import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
-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 BreadcrumbEllipsis: $$__sveltets_2_IsomorphicComponent<HTMLAttributes<HTMLSpanElement> & {
-    el?: HTMLSpanElement;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BreadcrumbEllipsis = InstanceType<typeof BreadcrumbEllipsis>;
+declare const BreadcrumbEllipsis: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
 export default BreadcrumbEllipsis;

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLLiAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLLiAttributes & {
-		el?: HTMLLIElement;
-	};
-
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
-	<slot />
+<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
+	{@render children?.()}
 </li>

package/dist/components/ui/breadcrumb/breadcrumb-item.svelte.d.ts

@@ -1,30 +1,4 @@
+import type { WithElementRef } from "bits-ui";
 import type { HTMLLiAttributes } from "svelte/elements";
-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 BreadcrumbItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLLiAttributes & {
-    el?: HTMLLIElement;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type BreadcrumbItem = InstanceType<typeof BreadcrumbItem>;
+declare const BreadcrumbItem: import("svelte").Component<WithElementRef<HTMLLiAttributes>, {}, "ref">;
 export default BreadcrumbItem;

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import type { WithElementRef } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAnchorAttributes & {
-		el?: HTMLAnchorElement;
-		asChild?: boolean;
-	};
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
 
-	export let href: $$Props["href"] = undefined;
-	export let el: $$Props["el"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-
-	let attrs: Record<string, unknown>;
-
-	$: attrs = {
+	const attrs = $derived({
 		class: cn("hover:text-foreground transition-colors", className),
 		href,
-		...$$restProps,
-	};
+		...restProps,
+	});
 </script>
 
-{#if asChild}
-	<slot {attrs} />
+{#if child}
+	{@render child({ props: attrs })}
 {:else}
-	<a bind:this={el} {...attrs} {href}>
-		<slot {attrs} />
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
 	</a>
 {/if}

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte.d.ts

@@ -1,35 +1,10 @@
 import type { HTMLAnchorAttributes } from "svelte/elements";
-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 BreadcrumbLink: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLAnchorAttributes & {
-    el?: HTMLAnchorElement;
-    asChild?: boolean;
-}, {
-    default: {
-        attrs: Record<string, unknown>;
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        attrs: Record<string, unknown>;
-    };
-}, {}, string>;
-type BreadcrumbLink = InstanceType<typeof BreadcrumbLink>;
+import type { Snippet } from "svelte";
+declare const BreadcrumbLink: import("svelte").Component<HTMLAnchorAttributes & {
+    ref?: HTMLElement | null | undefined;
+} & {
+    child?: Snippet<[{
+        props: HTMLAnchorAttributes;
+    }]>;
+}, {}, "ref">;
 export default BreadcrumbLink;

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLOlAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLOlAttributes & {
-		el?: HTMLOListElement;
-	};
-
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLOlAttributes> = $props();
 </script>
 
 <ol
-	bind:this={el}
+	bind:this={ref}
 	class={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </ol>

package/dist/components/ui/breadcrumb/breadcrumb-list.svelte.d.ts

@@ -1,30 +1,4 @@
+import type { WithElementRef } from "bits-ui";
 import type { HTMLOlAttributes } from "svelte/elements";
-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 BreadcrumbList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<HTMLOlAttributes & {
-    el?: HTMLOListElement;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type BreadcrumbList = InstanceType<typeof BreadcrumbList>;
+declare const BreadcrumbList: import("svelte").Component<WithElementRef<HTMLOlAttributes>, {}, "ref">;
 export default BreadcrumbList;

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
+	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLAttributes<HTMLSpanElement> & {
-		el?: HTMLSpanElement;
-	};
-
-	export let el: $$Props["el"] = undefined;
-	export let className: $$Props["class"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-	bind:this={el}
+	bind:this={ref}
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
 	class={cn("font-normal text-foreground", className)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte.d.ts

@@ -1,34 +1,4 @@
+import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
-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 BreadcrumbPage: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | null | undefined;
-} & HTMLAttributes<HTMLSpanElement> & {
-    el?: HTMLSpanElement;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    class: string | null | undefined;
-}, string>;
-type BreadcrumbPage = InstanceType<typeof BreadcrumbPage>;
+declare const BreadcrumbPage: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
 export default BreadcrumbPage;

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
-	import type { HTMLLiAttributes } from "svelte/elements";
 	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLLiAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
-	type $$Props = HTMLLiAttributes & {
-		el?: HTMLLIElement;
-	};
-
-	export let el: $$Props["el"] = undefined;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li role="presentation" aria-hidden="true" class={cn("[&>svg]:size-3.5", className)} bind:this={el} {...$$restProps}>
-	<slot>
+<li role="presentation" aria-hidden="true" class={cn("[&>svg]:size-3.5", className)} bind:this={ref} {...restProps}>
+	{#if children}
+		{@render children?.()}
+	{:else}
 		<ChevronRight />
-	</slot>
+	{/if}
 </li>