diff --git a/sites/docs/content/components/accordion.md b/sites/docs/content/components/accordion.md index af207b512..dc8fc0f72 100644 --- a/sites/docs/content/components/accordion.md +++ b/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. diff --git a/sites/docs/content/components/alert-dialog.md b/sites/docs/content/components/alert-dialog.md index ebf79fad2..98b06a25a 100644 --- a/sites/docs/content/components/alert-dialog.md +++ b/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}/ diff --git a/sites/docs/content/components/avatar.md b/sites/docs/content/components/avatar.md index 265078533..e999576bb 100644 --- a/sites/docs/content/components/avatar.md +++ b/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. diff --git a/sites/docs/content/components/collapsible.md b/sites/docs/content/components/collapsible.md index d3a9e077b..25fb3187b 100644 --- a/sites/docs/content/components/collapsible.md +++ b/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. diff --git a/sites/docs/content/components/combobox.md b/sites/docs/content/components/combobox.md index 1be8de359..9cb3c7c88 100644 --- a/sites/docs/content/components/combobox.md +++ b/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 { + onOpenChange={(o) => { myOpen = o; // additional logic here. }} diff --git a/sites/docs/content/components/command.md b/sites/docs/content/components/command.md index d4adbc527..15f308359 100644 --- a/sites/docs/content/components/command.md +++ b/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. diff --git a/sites/docs/content/components/dialog.md b/sites/docs/content/components/dialog.md index 087f8f3e9..38a929843 100644 --- a/sites/docs/content/components/dialog.md +++ b/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. diff --git a/sites/docs/content/components/listbox.md b/sites/docs/content/components/listbox.md index f6a539305..66c7545c7 100644 --- a/sites/docs/content/components/listbox.md +++ b/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 { + onOpenChange={(o) => { myOpen = o; // additional logic here. }} diff --git a/sites/docs/content/components/slider.md b/sites/docs/content/components/slider.md index d80782df1..050686242 100644 --- a/sites/docs/content/components/slider.md +++ b/sites/docs/content/components/slider.md @@ -30,7 +30,7 @@ description: Allows users to select a value from a continuous range by sliding a ``` -## 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. diff --git a/sites/docs/content/components/switch.md b/sites/docs/content/components/switch.md index 861a051d7..73d00d0f5 100644 --- a/sites/docs/content/components/switch.md +++ b/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 diff --git a/sites/docs/content/components/toggle.md b/sites/docs/content/components/toggle.md index a23204b85..6ae6a0606 100644 --- a/sites/docs/content/components/toggle.md +++ b/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); - + ``` diff --git a/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts b/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts index 744078ae1..e5eb9c5f0 100644 --- a/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts +++ b/sites/docs/src/lib/content/api-reference/alert-dialog.api.ts @@ -115,7 +115,7 @@ const content = createApiSchema({ const title = createApiSchema({ 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({ const description = createApiSchema({ title: "Description", - description: "An accessibile description for the alert dialog.", + description: "An accessible description for the alert dialog.", props: withChildProps({ elType: "HTMLDivElement" }), dataAttributes: [ createDataAttrSchema({ diff --git a/sites/docs/src/lib/content/api-reference/calendar.api.ts b/sites/docs/src/lib/content/api-reference/calendar.api.ts index 88a1a80e1..03981d21e 100644 --- a/sites/docs/src/lib/content/api-reference/calendar.api.ts +++ b/sites/docs/src/lib/content/api-reference/calendar.api.ts @@ -98,7 +98,7 @@ export const root = createApiSchema({ 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, diff --git a/sites/docs/src/lib/content/api-reference/date-field.api.ts b/sites/docs/src/lib/content/api-reference/date-field.api.ts index f39a1e95a..1a17c88f0 100644 --- a/sites/docs/src/lib/content/api-reference/date-field.api.ts +++ b/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({ ...withChildProps({ elType: "HTMLDivElement", childrenDef: DateFieldInputChildrenSnippetProps, - childDef: DateFieldInputChildSnippetprops, + childDef: DateFieldInputChildSnippetProps, }), }, dataAttributes: [ diff --git a/sites/docs/src/lib/content/api-reference/dialog.api.ts b/sites/docs/src/lib/content/api-reference/dialog.api.ts index da677af1a..a307bb804 100644 --- a/sites/docs/src/lib/content/api-reference/dialog.api.ts +++ b/sites/docs/src/lib/content/api-reference/dialog.api.ts @@ -102,7 +102,7 @@ export const content = createApiSchema({ export const title = createApiSchema({ 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({ export const description = createApiSchema({ title: "Description", - description: "An accessibile description for the dialog.", + description: "An accessible description for the dialog.", props: withChildProps({ elType: "HTMLDivElement" }), dataAttributes: [ createDataAttrSchema({ diff --git a/sites/docs/src/lib/content/api-reference/extended-types/shared/index.ts b/sites/docs/src/lib/content/api-reference/extended-types/shared/index.ts index 8710eb9a1..2940b84cf 100644 --- a/sites/docs/src/lib/content/api-reference/extended-types/shared/index.ts +++ b/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"; diff --git a/sites/docs/src/lib/content/api-reference/menu.api.ts b/sites/docs/src/lib/content/api-reference/menu.api.ts index 535546e36..b97e5f9f5 100644 --- a/sites/docs/src/lib/content/api-reference/menu.api.ts +++ b/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.", }), ]; diff --git a/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts b/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts index ed86e601e..30b34a317 100644 --- a/sites/docs/src/lib/content/api-reference/navigation-menu.api.ts +++ b/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"; diff --git a/sites/docs/src/lib/content/api-reference/pagination.api.ts b/sites/docs/src/lib/content/api-reference/pagination.api.ts index 96268b0c0..bca32f55a 100644 --- a/sites/docs/src/lib/content/api-reference/pagination.api.ts +++ b/sites/docs/src/lib/content/api-reference/pagination.api.ts @@ -58,7 +58,7 @@ export const root = createApiSchema({ 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({