next: spellchecks (#688)

sites/docs/content/components/accordion.md

@@ -26,11 +26,11 @@ The Accordion component is a versatile UI element that organizes content into co
 -   **Accessibility**: ARIA attributes for screen reader compatibility and keyboard navigation.
 -   **Transition Support**: CSS variables and data attributes for smooth transitions between states.
 -   **Flexible State Management**: Supports controlled and uncontrolled state, take control if needed.
--   **Compound Component Structure**: Provides a set of subcomponents that work together to create a fully-featured accordion.
+-   **Compound Component Structure**: Provides a set of sub-components that work together to create a fully-featured accordion.
 
 ## Architecture
 
-The Accordion component is composed of several subcomponents, each with a specific role:
+The Accordion component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The root element that wraps all accordion items and manages the overall state.
 -   **Item**: Individual sections within the accordion.

sites/docs/content/components/alert-dialog.md

@@ -18,16 +18,16 @@ description: A modal window that alerts users with important information and awa
 
 ## Key Features
 
--   **Compound Component Structure**: Offers a set of subcomponents that work together to create a fully-featured alert dialog.
+-   **Compound Component Structure**: Offers a set of sub-components that work together to create a fully-featured alert dialog.
 -   **Accessibility**: Built with WAI-ARIA guidelines in mind, ensuring keyboard navigation and screen reader support.
--   **Customizable**: Each subcomponent can be styled and configured independently.
+-   **Customizable**: Each sub-component can be styled and configured independently.
 -   **Portal Support**: Content can be rendered in a portal, ensuring proper stacking context.
 -   **Managed Focus**: Automatically manages focus, with the option to take control if needed.
 -   **Flexible State Management**: Supports both controlled and uncontrolled state, allowing for full control over the dialog's open state.
 
 ## Architecture
 
-The Alert Dialog component is composed of several subcomponents, each with a specific role:
+The Alert Dialog component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The main container component that manages the state of the dialog. Provides context for all child components.
 -   **Trigger**: A button that toggles the dialog's open state.
@@ -239,7 +239,7 @@ For more in-depth information on controlled components and advanced state manage
 
 By default, when a dialog is opened, focus will be trapped within the Dialog, preventing the user from interacting with the rest of the page. This follows the [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/examples/alertdialog/) for alert dialogs.
 
-Although it isn't recommended unless absolutely necessary, you can disabled this beahvior by setting the `trapFocus` prop to `false` on the `AlertDialog.Content` component.
+Although it isn't recommended unless absolutely necessary, you can disabled this behavior by setting the `trapFocus` prop to `false` on the `AlertDialog.Content` component.
 
 ```svelte /trapFocus={false}/
 <AlertDialog.Content trapFocus={false}>

sites/docs/content/components/avatar.md

@@ -22,13 +22,13 @@ The Avatar component is designed to represent a user or entity within your appli
 
 ## Key Features
 
--   **Compound Component Structure**: Offers a set of subcomponents that work together to create a fully-featured avatar.
+-   **Compound Component Structure**: Offers a set of sub-components that work together to create a fully-featured avatar.
 -   **Fallback Mechanism**: Provides a fallback when the primary image is unavailable or loading.
--   **Customizable**: Each subcomponent can be styled and configured independently to match your design system.
+-   **Customizable**: Each sub-component can be styled and configured independently to match your design system.
 
 ## Architecture
 
-The Avatar component is composed of several subcomponents, each with a specific role:
+The Avatar component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The main container component that manages the state of the avatar.
 -   **Image**: The primary image element that displays the user's profile picture or a representative image.

sites/docs/content/components/collapsible.md

@@ -25,11 +25,11 @@ The Collapsible component enables you to create expandable and collapsible conte
 -   **Accessibility**: ARIA attributes for screen reader compatibility and keyboard navigation.
 -   **Transition Support**: CSS variables and data attributes for smooth transitions between states.
 -   **Flexible State Management**: Supports controlled and uncontrolled state, take control if needed.
--   **Compound Component Structure**: Provides a set of subcomponents that work together to create a fully-featured collapsible.
+-   **Compound Component Structure**: Provides a set of sub-components that work together to create a fully-featured collapsible.
 
 ## Architecture
 
-The Accordion component is composed of a few subcomponents, each with a specific role:
+The Accordion component is composed of a few sub-components, each with a specific role:
 
 -   **Root**: The parent container that manages the state and context for the collapsible functionality.
 -   **Trigger**: The interactive element (e.g., button) that toggles the expanded/collapsed state of the content.

sites/docs/content/components/combobox.md

@@ -29,12 +29,12 @@ The Combobox component combines the functionality of an input field with a dropd
 
 ## Architecture
 
-The Combobox component is composed of several subcomponents, each with a specific role:
+The Combobox component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The main container component that manages the state and context for the combobox.
 -   **Input**: The input field that allows users to enter search queries.
 -   **Trigger**: The button or element that opens the dropdown list.
--   **Portal**: Responsible for portaling the dropdown content to the body or a custom target.
+-   **Portal**: Responsible for portalling the dropdown content to the body or a custom target.
 -   **Group**: A container for grouped items, used to group related items.
 -   **GroupHeading**: A heading for a group of items, providing a descriptive label for the group.
 -   **Item**: An individual item within the list.
@@ -276,7 +276,7 @@ For more granular control or to perform additional logic on state changes, use t
 
 <Combobox.Root
 	open={myOpen}
-	onOpenchange={(o) => {
+	onOpenChange={(o) => {
 		myOpen = o;
 		// additional logic here.
 	}}

sites/docs/content/components/command.md

@@ -30,7 +30,7 @@ The Command component, also known as a command menu, is designed to provide user
 
 ## Architecture
 
-The Command component is composed of several subcomponents, each with a specific role:
+The Command component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The main container that manages the overall state and context of the command menu.
 -   **Input**: The text input field where users can type to search or filter commands.

sites/docs/content/components/dialog.md

@@ -22,16 +22,16 @@ The Dialog component in Bits UI provides a flexible and accessible way to create
 
 ## Key Features
 
--   **Compound Component Structure**: Offers a set of subcomponents that work together to create a fully-featured dialog.
+-   **Compound Component Structure**: Offers a set of sub-components that work together to create a fully-featured dialog.
 -   **Accessibility**: Built with WAI-ARIA guidelines in mind, ensuring keyboard navigation and screen reader support.
--   **Customizable**: Each subcomponent can be styled and configured independently.
+-   **Customizable**: Each sub-component can be styled and configured independently.
 -   **Portal Support**: Content can be rendered in a portal, ensuring proper stacking context.
 -   **Managed Focus**: Automatically manages focus, with the option to take control if needed.
 -   **Flexible State Management**: Supports both controlled and uncontrolled state, allowing for full control over the dialog's open state.
 
 ## Architecture
 
-The Dialog component is composed of several subcomponents, each with a specific role:
+The Dialog component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The main container component that manages the state of the dialog. Provides context for all child components.
 -   **Trigger**: A button that toggles the dialog's open state.

sites/docs/content/components/listbox.md

@@ -31,11 +31,11 @@ The Listbox component provides users with a selectable list of options. It's des
 
 ## Architecture
 
-The Listbox component is composed of several subcomponents, each with a specific role:
+The Listbox component is composed of several sub-components, each with a specific role:
 
 -   **Root**: The main container component that manages the state and context for the combobox.
 -   **Trigger**: The button or element that opens the dropdown list.
--   **Portal**: Responsible for portaling the dropdown content to the body or a custom target.
+-   **Portal**: Responsible for portalling the dropdown content to the body or a custom target.
 -   **Group**: A container for grouped items, used to group related items.
 -   **GroupHeading**: A heading for a group of items, providing a descriptive label for the group.
 -   **Item**: An individual item within the list.
@@ -272,7 +272,7 @@ For more granular control or to perform additional logic on state changes, use t
 
 <Listbox.Root
 	open={myOpen}
-	onOpenchange={(o) => {
+	onOpenChange={(o) => {
 		myOpen = o;
 		// additional logic here.
 	}}

sites/docs/content/components/slider.md

@@ -30,7 +30,7 @@ description: Allows users to select a value from a continuous range by sliding a
 </Slider.Root>
 ```
 
-## Resuable Components
+## Reusable Components
 
 Bits UI provides primitives that enable you to build your own custom slider component that can be reused throughout your application.
 

sites/docs/content/components/switch.md

@@ -24,7 +24,7 @@ The Switch component provides an intuitive and accessible toggle control, allowi
 
 -   **Accessibility**: Built with WAI-ARIA guidelines in mind, ensuring keyboard navigation and screen reader support.
 -   **State Management**: Internally manages the on/off state, with options for controlled and uncontrolled usage.
--   **Stylable**: Data attributes allow for smooth transitions between states and custom styles.
+-   **Style-able**: Data attributes allow for smooth transitions between states and custom styles.
 -   **HTML Forms**: Can render a hidden input element for form submissions.
 
 ## Architecture

sites/docs/content/components/toggle.md

@@ -40,7 +40,7 @@ For seamless state synchronization, use Svelte's `bind:pressed` directive. This
 	let myPressed = $state(true);
 </script>
 
-<button onclick={() => (myPressed = false)}> unpress </button>
+<button onclick={() => (myPressed = false)}> un-press </button>
 
 <Toggle.Root bind:pressed={myPressed} />
 ```

sites/docs/src/lib/content/api-reference/alert-dialog.api.ts

@@ -115,7 +115,7 @@ const content = createApiSchema<AlertDialogContentPropsWithoutHTML>({
 
 const title = createApiSchema<AlertDialogTitlePropsWithoutHTML>({
 	title: "Title",
-	description: "An accessibile title for the alert dialog.",
+	description: "An accessible title for the alert dialog.",
 	props: {
 		level: createUnionProp({
 			definition: HeaderLevelProp,
@@ -136,7 +136,7 @@ const title = createApiSchema<AlertDialogTitlePropsWithoutHTML>({
 
 const description = createApiSchema<AlertDialogDescriptionPropsWithoutHTML>({
 	title: "Description",
-	description: "An accessibile description for the alert dialog.",
+	description: "An accessible description for the alert dialog.",
 	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({

sites/docs/src/lib/content/api-reference/calendar.api.ts

@@ -98,7 +98,7 @@ export const root = createApiSchema<CalendarRootPropsWithoutHTML>({
 		placeholder: {
 			type: dateValueProp,
 			description:
-				"The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programatically control the calendar's view.",
+				"The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar, and can be used to programmatically control the calendar's view.",
 		},
 		onPlaceholderChange: createFunctionProp({
 			definition: OnPlaceholderChangeProp,

sites/docs/src/lib/content/api-reference/date-field.api.ts

@@ -20,9 +20,8 @@ import {
 } from "./helpers.js";
 import { dateValueProp } from "./extended-types/index.js";
 import {
-	DateFieldInputChildSnippetprops,
+	DateFieldInputChildSnippetProps,
 	DateFieldInputChildrenSnippetProps,
-	DateMatcherProp,
 	DateOnInvalidProp,
 	DateValidateProp,
 	GranularityProp,
@@ -135,7 +134,7 @@ export const input = createApiSchema<DateFieldInputPropsWithoutHTML>({
 		...withChildProps({
 			elType: "HTMLDivElement",
 			childrenDef: DateFieldInputChildrenSnippetProps,
-			childDef: DateFieldInputChildSnippetprops,
+			childDef: DateFieldInputChildSnippetProps,
 		}),
 	},
 	dataAttributes: [

sites/docs/src/lib/content/api-reference/dialog.api.ts

@@ -102,7 +102,7 @@ export const content = createApiSchema<DialogContentPropsWithoutHTML>({
 
 export const title = createApiSchema<DialogTitlePropsWithoutHTML>({
 	title: "Title",
-	description: "An accessibile title for the dialog.",
+	description: "An accessible title for the dialog.",
 	props: {
 		level: createUnionProp({
 			options: ["1", "2", "3", "4", "5", "6"],
@@ -122,7 +122,7 @@ export const title = createApiSchema<DialogTitlePropsWithoutHTML>({
 
 export const description = createApiSchema<DialogDescriptionPropsWithoutHTML>({
 	title: "Description",
-	description: "An accessibile description for the dialog.",
+	description: "An accessible description for the dialog.",
 	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({

sites/docs/src/lib/content/api-reference/extended-types/shared/index.ts

@@ -4,7 +4,7 @@ export { default as CheckedChildSnippetProps } from "./checked-child-snippet-pro
 export { default as CheckedChildrenSnippetProps } from "./checked-children-snippet-props.md";
 export { default as CheckedProp } from "./checked-prop.md";
 export { default as ChildDefaultSnippetProps } from "./child-default-snippet-props.md";
-export { default as DateFieldInputChildSnippetprops } from "./date-field-input-child-snippet-props.md";
+export { default as DateFieldInputChildSnippetProps } from "./date-field-input-child-snippet-props.md";
 export { default as DateFieldInputChildrenSnippetProps } from "./date-field-input-children-snippet-props.md";
 export { default as DateMatcherProp } from "./date-matcher-prop.md";
 export { default as DateOnPlaceholderChangeProp } from "./date-on-placeholder-change-prop.md";

sites/docs/src/lib/content/api-reference/menu.api.ts

@@ -48,7 +48,6 @@ import {
 	OpenChildSnippetProps,
 	OpenChildrenSnippetProps,
 	OpenClosedProp,
-	OrientationProp,
 	RadioItemChildSnippetProps,
 	RadioItemChildrenSnippetProps,
 } from "./extended-types/shared/index.js";
@@ -378,7 +377,7 @@ const separatorAttrs: DataAttrs = [
 const subContentAttrs: DataAttrs = [
 	STATE,
 	createDataAttrSchema({
-		name: "menu-subcontent",
+		name: "menu-sub-content",
 		description: "Present on the submenu content element.",
 	}),
 ];
@@ -387,7 +386,7 @@ const subTriggerAttrs: DataAttrs = [
 	...sharedItemAttrs,
 	STATE,
 	createDataAttrSchema({
-		name: "menu-subtrigger",
+		name: "menu-sub-trigger",
 		description: "Present on the submenu trigger element.",
 	}),
 ];

sites/docs/src/lib/content/api-reference/navigation-menu.api.ts

@@ -19,8 +19,6 @@ import {
 	dirProp,
 	dismissableLayerProps,
 	escapeLayerProps,
-	floatingProps,
-	focusScopeProps,
 	forceMountProp,
 	withChildProps,
 } from "./helpers.js";

sites/docs/src/lib/content/api-reference/pagination.api.ts

@@ -58,7 +58,7 @@ export const root = createApiSchema<PaginationRootPropsWithoutHTML>({
 			options: ["horizontal", "vertical"],
 			default: "horizontal",
 			description:
-				"The orientation of the pagination. This determins how keyboard navigation will work with the component.",
+				"The orientation of the pagination. This determines how keyboard navigation will work with the component.",
 			definition: OrientationProp,
 		}),
 		...withChildProps({