svelte-ag 0.0.2-dev.73 → 0.0.2-dev.81

package/src/lib/components/sidebar/index.ts

@@ -0,0 +1,75 @@
+import { useSidebar } from './context.svelte.js';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Group from './sidebar-group.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import MenuAction from './sidebar-menu-action.svelte';
+import MenuBadge from './sidebar-menu-badge.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuSkeleton from './sidebar-menu-skeleton.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.svelte';
+import MenuSub from './sidebar-menu-sub.svelte';
+import Menu from './sidebar-menu.svelte';
+import Provider from './sidebar-provider.svelte';
+import Rail from './sidebar-rail.svelte';
+import Separator from './sidebar-separator.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Root from './sidebar.svelte';
+
+export {
+  Content,
+  Footer,
+  Group,
+  GroupAction,
+  GroupContent,
+  GroupLabel,
+  Header,
+  Input,
+  Inset,
+  Menu,
+  MenuAction,
+  MenuBadge,
+  MenuButton,
+  MenuItem,
+  MenuSkeleton,
+  MenuSub,
+  MenuSubButton,
+  MenuSubItem,
+  Provider,
+  Rail,
+  Root,
+  Separator,
+  //
+  Root as Sidebar,
+  Content as SidebarContent,
+  Footer as SidebarFooter,
+  Group as SidebarGroup,
+  GroupAction as SidebarGroupAction,
+  GroupContent as SidebarGroupContent,
+  GroupLabel as SidebarGroupLabel,
+  Header as SidebarHeader,
+  Input as SidebarInput,
+  Inset as SidebarInset,
+  Menu as SidebarMenu,
+  MenuAction as SidebarMenuAction,
+  MenuBadge as SidebarMenuBadge,
+  MenuButton as SidebarMenuButton,
+  MenuItem as SidebarMenuItem,
+  MenuSkeleton as SidebarMenuSkeleton,
+  MenuSub as SidebarMenuSub,
+  MenuSubButton as SidebarMenuSubButton,
+  MenuSubItem as SidebarMenuSubItem,
+  Provider as SidebarProvider,
+  Rail as SidebarRail,
+  Separator as SidebarSeparator,
+  Trigger as SidebarTrigger,
+  Trigger,
+  useSidebar
+};

package/src/lib/components/sidebar/sidebar-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$shadcn/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="content"
+	class={cn(
+		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-footer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$shadcn/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="footer"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const propObj = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			// Increases the hit area of the button on mobile.
+			"after:absolute after:-inset-2 after:md:hidden",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		),
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: propObj })}
+{:else}
+	<button bind:this={ref} {...propObj}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/sidebar/sidebar-group-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="group-content"
+	class={cn("w-full text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+			className
+		),
+		"data-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/sidebar/sidebar-group.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$shadcn/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="group"
+	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$shadcn/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="header"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$shadcn/input/index.js";
+	import { cn } from "$shadcn/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-sidebar="input"
+	class={cn(
+		"bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/sidebar/sidebar-inset.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '$shadcn/utils.js';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+
+  //       peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))]
+</script>
+
+<main
+  bind:this={ref}
+  class={cn(
+    'bg-background relative flex flex-1 flex-col',
+    `
+      md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0
+      md:peer-data-[variant=inset]:rounded-xl
+      md:peer-data-[variant=inset]:shadow
+      md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2
+    `,
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</main>

package/src/lib/components/sidebar/sidebar-menu-action.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { cn } from '$shadcn/utils.js';
+  import type { WithElementRef } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    showOnHover = false,
+    children,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    showOnHover?: boolean;
+  } = $props();
+
+  const mergedProps = $derived({
+    class: cn(
+      `
+        text-sidebar-foreground ring-sidebar-ring absolute top-1.5 right-1 flex aspect-square w-5 items-center
+        justify-center rounded-md p-0 transition-transform outline-none
+        hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
+        peer-hover/menu-button:text-sidebar-accent-foreground
+        focus-visible:ring-2
+        [&>svg]:size-4 [&>svg]:shrink-0
+      `,
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover &&
+        `
+          peer-data-[active=true]/menu-button:text-sidebar-accent-foreground
+          group-focus-within/menu-item:opacity-100
+          group-hover/menu-item:opacity-100
+          data-[state=open]:opacity-100
+          md:opacity-0
+        `,
+      className
+    ),
+    'data-sidebar': 'menu-action',
+    ...restProps
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/src/lib/components/sidebar/sidebar-menu-badge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="menu-badge"
+	class={cn(
+		"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+		"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+		"peer-data-[size=sm]/menu-button:top-1",
+		"peer-data-[size=default]/menu-button:top-1.5",
+		"peer-data-[size=lg]/menu-button:top-2.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-menu-button.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const sidebarMenuButtonVariants = tv({
+    base: cn(`
+      peer/menu-button ring-sidebar-ring flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm
+      transition-[width,height,padding] outline-none
+      hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
+      active:bg-sidebar-accent active:text-sidebar-accent-foreground
+      data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground
+      data-[active=true]:font-medium
+      data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground
+      group-has-[[data-sidebar=menu-action]]/menu-item:pr-8
+      group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2
+      focus-visible:ring-2
+      disabled:pointer-events-none disabled:opacity-50
+      aria-disabled:pointer-events-none aria-disabled:opacity-50
+      [&>span:last-child]:truncate
+      [&>svg]:size-4 [&>svg]:shrink-0
+    `),
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline: `
+          bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))]
+          hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
+          hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]
+        `
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: `
+          h-12 text-sm
+          group-data-[collapsible=icon]:!p-0
+        `
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  });
+
+  export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+  export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+  import { mergeProps, type WithElementRef, type WithoutChildrenOrChild } from 'bits-ui';
+  import * as Tooltip from '$shadcn/tooltip/index.js';
+  import * as AlertDialog from '$shadcn/alert-dialog/index.js';
+
+  import { cn } from '$shadcn/utils.js';
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { useSidebar } from './context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    child,
+    variant = 'default',
+    size = 'default',
+    side = 'left',
+    isActive = false,
+    tooltipContent,
+    tooltipContentProps,
+    alertContent,
+    alertContentProps,
+    alertOpen = $bindable(false),
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    isActive?: boolean;
+    variant?: SidebarMenuButtonVariant;
+    size?: SidebarMenuButtonSize;
+    side?: 'left' | 'right';
+    tooltipContent?: Snippet;
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+    alertContent?: Snippet;
+    alertContentProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialog.Content>>;
+    alertOpen?: boolean;
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+  } = $props();
+
+  const sidebar = useSidebar();
+
+  const buttonProps = $derived({
+    class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+    'data-sidebar': 'menu-button',
+    'data-size': size,
+    'data-active': isActive,
+    ...restProps
+  });
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+  {@const mergedProps = mergeProps(buttonProps, props)}
+  {#if child}
+    {@render child({ props: mergedProps })}
+  {:else}
+    <button bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </button>
+  {/if}
+{/snippet}
+
+{#if !tooltipContent}
+  {@render Button({})}
+{:else if tooltipContent && !alertContent}
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props })}
+        {@render Button({ props })}
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content
+      side="right"
+      align="center"
+      hidden={sidebar.state[side] !== 'collapsed' || sidebar.isMobile}
+      children={tooltipContent}
+      {...tooltipContentProps}
+    />
+  </Tooltip.Root>
+  <!-- Added by me. The option to also have an alert -->
+{:else if alertContent}
+  <AlertDialog.Root bind:open={alertOpen}>
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={0}>
+        <Tooltip.Trigger>
+          <AlertDialog.Trigger>
+            {#snippet child({ props })}
+              {@render Button({ props })}
+            {/snippet}
+          </AlertDialog.Trigger>
+        </Tooltip.Trigger>
+        <Tooltip.Content
+          side="right"
+          align="center"
+          hidden={sidebar.state[side] !== 'collapsed' || sidebar.isMobile}
+          children={tooltipContent}
+          {...tooltipContentProps}
+        />
+      </Tooltip.Root>
+    </Tooltip.Provider>
+
+    <AlertDialog.Content children={alertContent} {...alertContentProps} />
+  </AlertDialog.Root>
+{/if}

package/src/lib/components/sidebar/sidebar-menu-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-sidebar="menu-item"
+	class={cn("group/menu-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>

package/src/lib/components/sidebar/sidebar-menu-skeleton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Skeleton } from "$shadcn/skeleton/index.js";
+	import { cn } from "$shadcn/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="menu-skeleton"
+	class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="h-4 max-w-[var(--skeleton-width)] flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>

package/src/lib/components/sidebar/sidebar-menu-sub-button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { cn } from '$shadcn/utils.js';
+  import type { WithElementRef } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    children,
+    child,
+    class: className,
+    size = 'md',
+    isActive,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+  } = $props();
+
+  const mergedProps = $derived({
+    class: cn(
+      `
+        text-sidebar-foreground ring-sidebar-ring flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden
+        rounded-md px-2 outline-none
+        hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
+        active:bg-sidebar-accent active:text-sidebar-accent-foreground
+        [&>svg]:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0
+        focus-visible:ring-2
+        disabled:pointer-events-none disabled:opacity-50
+        aria-disabled:pointer-events-none aria-disabled:opacity-50
+        [&>span:last-child]:truncate
+      `,
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      className
+    ),
+    'data-sidebar': 'menu-sub-button',
+    'data-size': size,
+    'data-active': isActive,
+    ...restProps
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <a bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </a>
+{/if}

package/src/lib/components/sidebar/sidebar-menu-sub-item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$utils';
+  import type { WithElementRef } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li bind:this={ref} data-sidebar="menu-sub-item" {...restProps} class={cn('relative', className)}>
+  {@render children?.()}
+</li>