next: some docs clean-up (#686)

Co-authored-by: Davis SHYAKA <[email protected]>

sites/docs/content/components/accordion.md

@@ -61,7 +61,7 @@ Here's an overview of how the Accordion component is structured in code:
 
 If you're planning to use the `Accordion` component throughout your application, it's recommended to create reusable wrapper components to reduce the amount of code you need to write each time.
 
-For each invidual item, you need an `Accordion.Item`, `Accordion.Header`, `Accordion.Trigger` and `Accordion.Content` component. We can combine these into a single `MyccordionItem` component that makes it easier to reuse.
+For each individual item, you need an `Accordion.Item`, `Accordion.Header`, `Accordion.Trigger` and `Accordion.Content` component. We can combine these into a single `MyAccordionItem` component that makes it easier to reuse.
 
 ```svelte title="MyAccordionItem.svelte"
 <script lang="ts">

sites/docs/content/components/calendar.md

@@ -320,7 +320,7 @@ You can set a maximum value for the calendar by using the `maxValue` prop on `Ca
 
 ### Unavailable Dates
 
-You can specify speciifc dates that are unavailable for selection by using the `isDateUnavailable` prop. This prop accepts a function that returns a boolean value indicating whether a date is unavailable or not.
+You can specify specific dates that are unavailable for selection by using the `isDateUnavailable` prop. This prop accepts a function that returns a boolean value indicating whether a date is unavailable or not.
 
 ```svelte
 <script lang="ts">
@@ -342,7 +342,7 @@ You can specify speciifc dates that are unavailable for selection by using the `
 
 ### Disabled Dates
 
-You can specify speciifc dates that are disabled for selection by using the `isDateDisabled` prop.
+You can specify specific dates that are disabled for selection by using the `isDateDisabled` prop.
 
 ```svelte
 <script lang="ts">

sites/docs/content/components/popover.md

@@ -126,7 +126,7 @@ For more in-depth information on controlled components and advanced state manage
 
 ### Focus Trap
 
-By default, when a Popover is opened, focus will be trapped within that Popover. You can disabled this beahvior by setting the `trapFocus` prop to `false` on the `Popover.Content` component.
+By default, when a Popover is opened, focus will be trapped within that Popover. You can disable this behavior by setting the `trapFocus` prop to `false` on the `Popover.Content` component.
 
 ```svelte /trapFocus={false}/
 <Popover.Content trapFocus={false}>

sites/docs/content/delegation.md

@@ -17,7 +17,6 @@ While we do allow you to set any attribute that you normally could on a button,
 
 Each of the components that support render delegation accept an optional prop called `child`, which is a [Snippet](https://svelte.dev). When used, the component will pass the attributes as a snippet prop, which you can then apply to the element of your choosing. Note, if you use `child` any other children that aren't within that `child` snippet will be ignored.
 
-Let's take a look at an example using the `Accordion.Trigger` component:
 Let's take a look at an example using the `Accordion.Trigger` component:
 
 ```svelte
@@ -28,11 +27,11 @@ Let's take a look at an example using the `Accordion.Trigger` component:
 </Accordion.Trigger>
 ```
 
-We're passing all the props/attribute we would normally apply to th `<button>` within the component to whatever element we want. These props include event handlers, aria attributes, and any other attributes you passed into the `Accordion.Trigger` component.
+We're passing all the props/attributes we would normally apply to the `<button>` within the component to whatever element we want. These props include event handlers, aria attributes, and any other attributes you passed into the `Accordion.Trigger` component.
 
 ## Custom IDs & Attributes
 
-If you wish to use a custom ID, event handlers, or other attributes with a custom element, you **_must_** pass them to the component first. A lot of Bits UI internals rely on the ID, and these props are merged via [`mergeProps`](https://github.com/huntabyte/bits-ui/blob/main/packages/bits-ui/src/lib/internal/mergeProps.ts) so you'll need to do something like this:
+If you wish to use a custom ID, event handlers, or other attributes with a custom element, you **_must_** pass them to the component first. A lot of Bits UI internals rely on the ID, and these props are merged via [`mergeProps`](https://github.com/huntabyte/bits-ui/blob/main/packages/bits-ui/src/lib/internal/mergeProps.ts), so you'll need to do something like this:
 
 ```svelte
 <Accordion.Trigger id="my-custom-id" onclick={() => console.log("clicked")}>

sites/docs/content/ref.md

@@ -27,7 +27,7 @@ For example, the `Accordion.Trigger` component exposes a `ref` prop, which gives
 
 ## With delegation
 
-Bits UI tracks the reference to the underlying element using it's `id` attribute. This means that even if you use a custom element/component with [delegation](/docs/delegation), the `ref` prop will still work.
+Bits UI tracks the reference to the underlying element using its `id` attribute. This means that even if you use a custom element/component with [delegation](/docs/delegation), the `ref` prop will still work.
 
 ```svelte
 <script lang="ts">
@@ -48,7 +48,7 @@ Bits UI tracks the reference to the underlying element using it's `id` attribute
 </Accordion.Trigger>
 ```
 
-One caveat is that if you wish to use a custom `id` on the element, you must pass it to the component first so it can be registered and associated with the `ref` prop. The `id` you pass will be passed down via the `props` snippet prop on the `child` snippet.
+One caveat is that if you wish to use a custom `id` on the element, you must pass it to the component first, so it can be registered and associated with the `ref` prop. The `id` you pass will be passed down via the `props` snippet prop on the `child` snippet.
 
 ```svelte
 <script lang="ts">

sites/docs/content/styling.md

@@ -41,9 +41,11 @@ You can then use those data attributes like so:
 ```svelte title="src/routes/+layout.svelte"
 <script lang="ts">
 	import "../app.pcss";
+
+	let { children } = $props();
 </script>
 
-<slot />
+{@render children()}
 ```
 
 Now every `<Button.Root />` component will have the styles applied to it.
@@ -68,9 +70,11 @@ If you prefer the class approach, you can simply apply your global classes to th
 ```svelte title="src/routes/+layout.svelte"
 <script lang="ts">
 	import "../app.pcss";
+
+	let { children } = $props();
 </script>
 
-<slot />
+{@render children()}
 ```
 
 #### Use with components

sites/docs/content/type-helpers/without-children.md

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

sites/docs/content/utilities/merge-props.md

@@ -22,7 +22,7 @@ const mergedProps = mergeProps(props1, props2);
 console.log(mergedProps.onclick(new MouseEvent("click"))); // 1 2
 ```
 
-Since `props1` didn't call `event.preventDefault()`, `props2` will stll be called as normal.
+Since `props1` didn't call `event.preventDefault()`, `props2` will still be called as normal.
 
 ```ts
 import { mergeProps } from "bits-ui";
@@ -49,7 +49,7 @@ Since `props2` called `event.preventDefault()`, `props3`'s `onclick` handler wil
 
 ## Non-Event Handler Functions
 
-Functions that are't event handlers are also chained together, but one can't cancel out the other since there isn't an `event` object to cancel.
+Functions that aren't event handlers are also chained together, but one can't cancel out the other since there isn't an `event` object to cancel.
 
 ```ts
 import { mergeProps } from "bits-ui";
@@ -79,7 +79,7 @@ console.log(mergedProps.class); // "orange blue yellow green"
 
 ## Styles
 
-`mergeProps` also handles merging of style objects using `style-to-object`. You can pass in multiple style objects or style strings and they will be gracefully merged together in the order they are passed.
+`mergeProps` also handles merging of style objects using `style-to-object`. You can pass in multiple style objects or style strings, and they will be gracefully merged together in the order they are passed.
 
 ```ts
 import { mergeProps } from "bits-ui";