more

sites/docs/content/utilities/without-child.md

@@ -6,3 +6,17 @@ description: A type helper to exclude the child snippet prop from a component.
 The `WithoutChild` type helper is used to exclude the `child` snippet prop from a component. This is useful when you're building custom component wrappers that populate the `children` prop of a component and don't provide a way to pass a custom `child` snippet.
 
 To learn more about the `child` snippet prop, check out the [delegation](/docs/delegation) documentation.
+
+```svelte title="CustomAccordionHeader.svelte"
+<script lang="ts">
+	import { Accordion, type WithoutChild } from "bits-ui";
+
+	let { children, ...restProps }: WithoutChild<Accordion.ItemProps> = $props();
+</script>
+
+<Accordion.Header {...restProps}>
+	<Accordion.Trigger>
+		{@render children?.()}
+	</Accordion.Trigger>
+</Accordion.Header>
+```

sites/docs/content/utilities/without-children-or-child.md

@@ -3,29 +3,27 @@ title: WithoutChildrenOrChild
 description: A type helper to exclude the child ad children snippet props from a component.
 ---
 
-The `WithoutChildrenOrChild` type helper is used to exclude the `child` and `children` snippet props from a component. This is useful when you're building custom component wrappers that populate the `children` prop of a component and don't provide a way to pass a custom `children` or `child` snippet.
+The `WithoutChildrenOrChild` type helper is used to exclude the `child` and `children` props from a component. This is useful when you're building custom component wrappers that populate the `children` prop of a component and don't provide a way to pass a custom `children` or `child` snippet.
 
 To learn more about the `child` snippet prop, check out the [delegation](/docs/delegation) documentation.
 
-```svelte title="CustomAccordion.svelte"
+```svelte title="CustomAccordionTrigger.svelte"
 <script lang="ts">
 	import { Accordion, type WithoutChildrenOrChild } from "bits-ui";
 
-	type Props = WithoutChildrenOrChild<{
-		value: string;
-		onValueChange: (value: string) => void;
-	}>;
-
-	let { value, onValueChange, ...restProps }: Props = $props();
+	let {
+		title,
+		...restProps
+	}: WithoutChildrenOrChild<
+		Accordion.TriggerProps & {
+			title: string;
+		}
+	> = $props();
 </script>
 
-<Accordion.Root {...restProps}>
-	<Accordion.Item {value} {onValueChange}>
-		<Accordion.Header />
-		<Accordion.Trigger />
-		<Accordion.Content />
-	</Accordion.Item>
-</Accordion.Root>
+<Accordion.Trigger>
+	{title}
+</Accordion.Trigger>
 ```
 
-Now, the `CustomAccordion` component won't expose `children` or `child` snippet props to the user, but will expose the other root component props.
+Now, the `CustomAccordionTrigger` component won't expose `children` or `child` props to the user, but will expose the other root component props.

sites/docs/content/utilities/without-children.md

@@ -9,12 +9,7 @@ The `WithoutChildren` type helper is used to exclude the `children` snippet prop
 <script lang="ts">
 	import { Accordion, type WithoutChildren } from "bits-ui";
 
-	type Props = WithoutChildren<{
-		value: string;
-		onValueChange: (value: string) => void;
-	}>;
-
-	let { value, onValueChange, ...restProps }: Props = $props();
+	let { value, onValueChange, ...restProps }: WithoutChildren<Acccordion.RootProps> = $props();
 </script>
 
 <Accordion.Root {...restProps}>