[docs] Move API section last on the components page

docs/src/app/(public)/(content)/react/components/alert-dialog/page.mdx

@@ -30,13 +30,6 @@ import { AlertDialog } from '@base-ui-components/react/alert-dialog';
 </AlertDialog.Root>;
 ```
 
-## API reference
-
-<Reference
-  component="AlertDialog"
-  parts="Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close"
-/>
-
 ## Examples
 
 ### Open from a menu
@@ -175,3 +168,10 @@ Note that there is no separate `onTriggerIdChange` prop.
 Instead, the `onOpenChange` callback receives an additional argument, `eventDetails`, which contains the trigger element that initiated the state change.
 
 <Demo path="./demos/detached-triggers-controlled" />
+
+## API reference
+
+<Reference
+  component="AlertDialog"
+  parts="Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close"
+/>

docs/src/app/(public)/(content)/react/components/autocomplete/page.mdx

@@ -55,53 +55,6 @@ import { Autocomplete } from '@base-ui-components/react/autocomplete';
 </Autocomplete.Root>;
 ```
 
-## API reference
-
-<Reference component="Autocomplete" parts="Root, Value" />
-<Reference
-  component="Combobox"
-  as="Autocomplete"
-  parts="Input, Trigger, Icon, Clear, List, Portal, Backdrop, Positioner, Popup, Arrow, Status, Empty, Collection, Row, Item, Group, GroupLabel, Separator"
-/>
-
-## useFilter
-
-Matches items against a query using `Intl.Collator` for robust string matching.
-This hook is used when externally filtering items.
-
-### Input parameters
-
-Accepts all `Intl.CollatorOptions`, plus the following option:
-
-<PropsReferenceTable
-  data={{
-    locale: {
-      type: 'Intl.LocalesArgument',
-      description: 'The locale to use for string comparison.',
-    },
-  }}
-/>
-
-### Return value
-
-<PropsReferenceTable
-  type="return"
-  data={{
-    contains: {
-      type: '(itemValue: any, query: string) => boolean',
-      description: 'Returns whether the item matches the query anywhere.',
-    },
-    startsWith: {
-      type: '(itemValue: any, query: string) => boolean',
-      description: 'Returns whether the item starts with the query.',
-    },
-    endsWith: {
-      type: '(itemValue: any, query: string) => boolean',
-      description: 'Returns whether the item ends with the query.',
-    },
-  }}
-/>
-
 ## TypeScript inference
 
 Autocomplete infers the item type from the `items` prop passed to `<Autocomplete.Root>`.
@@ -158,3 +111,50 @@ Display items in a grid layout, wrapping each row in `<Autocomplete.Row>` compon
 Efficiently handle large datasets using a virtualization library like `@tanstack/react-virtual`.
 
 <Demo path="./demos/virtualized" compact />
+
+## API reference
+
+<Reference component="Autocomplete" parts="Root, Value" />
+<Reference
+  component="Combobox"
+  as="Autocomplete"
+  parts="Input, Trigger, Icon, Clear, List, Portal, Backdrop, Positioner, Popup, Arrow, Status, Empty, Collection, Row, Item, Group, GroupLabel, Separator"
+/>
+
+## useFilter
+
+Matches items against a query using `Intl.Collator` for robust string matching.
+This hook is used when externally filtering items.
+
+### Input parameters
+
+Accepts all `Intl.CollatorOptions`, plus the following option:
+
+<PropsReferenceTable
+  data={{
+    locale: {
+      type: 'Intl.LocalesArgument',
+      description: 'The locale to use for string comparison.',
+    },
+  }}
+/>
+
+### Return value
+
+<PropsReferenceTable
+  type="return"
+  data={{
+    contains: {
+      type: '(itemValue: any, query: string) => boolean',
+      description: 'Returns whether the item matches the query anywhere.',
+    },
+    startsWith: {
+      type: '(itemValue: any, query: string) => boolean',
+      description: 'Returns whether the item starts with the query.',
+    },
+    endsWith: {
+      type: '(itemValue: any, query: string) => boolean',
+      description: 'Returns whether the item ends with the query.',
+    },
+  }}
+/>

docs/src/app/(public)/(content)/react/components/button/page.mdx

@@ -20,10 +20,6 @@ import { Button } from '@base-ui-components/react/button';
 <Button />;
 ```
 
-## API reference
-
-<Reference component="Button" />
-
 ## Examples
 
 ### Rendering as another tag
@@ -43,3 +39,7 @@ import { Button } from '@base-ui-components/react/button';
 For buttons that enter a loading state after being clicked, specify the `focusableWhenDisabled` prop to ensure focus remains on the button when it becomes disabled. This prevents focus from being lost and maintains the tab order.
 
 <Demo path="./demos/loading" compact />
+
+## API reference
+
+<Reference component="Button" />

docs/src/app/(public)/(content)/react/components/checkbox-group/page.mdx

@@ -21,10 +21,6 @@ import { CheckboxGroup } from '@base-ui-components/react/checkbox-group';
 </CheckboxGroup>;
 ```
 
-## API reference
-
-<Reference component="CheckboxGroup" />
-
 ## Examples
 
 ### Parent checkbox
@@ -72,3 +68,7 @@ To use checkbox group in a form:
 ```
 
 <Demo compact path="./demos/form" />
+
+## API reference
+
+<Reference component="CheckboxGroup" />

docs/src/app/(public)/(content)/react/components/checkbox/page.mdx

@@ -20,10 +20,6 @@ import { Checkbox } from '@base-ui-components/react/checkbox';
 </Checkbox.Root>;
 ```
 
-## API reference
-
-<Reference component="Checkbox" parts="Root, Indicator" />
-
 ## Examples
 
 ### Form integration
@@ -40,3 +36,7 @@ To use a single checkbox in a form, pass the checkbox's `name` to `<Field>` and
   </Field.Root>
 </Form>
 ```
+
+## API reference
+
+<Reference component="Checkbox" parts="Root, Indicator" />

docs/src/app/(public)/(content)/react/components/combobox/page.mdx

@@ -63,6 +63,45 @@ import { Combobox } from '@base-ui-components/react/combobox';
 </Combobox.Root>;
 ```
 
+## TypeScript inference
+
+Combobox infers the item type from the `defaultValue` or `value` props passed to `<Combobox.Root>`.
+When using `itemToStringLabel` or `itemToStringValue`, the `value` prop on the `<Combobox.Item>` must match the type passed to `defaultValue` or `value`.
+When not specifying value props, the parameter's type must be explicitly specified.
+
+## Examples
+
+### Multiple select
+
+The combobox can allow multiple selections by adding the `multiple` prop to `<Combobox.Root>`.
+Selection chips are rendered with `<Combobox.Chip>` inside the input that can be removed.
+
+<Demo path="./demos/multiple" compact />
+
+### Input inside popup
+
+`<Combobox.Input>` can be rendered inside `<Combobox.Popup>` to create a searchable select popup.
+
+<Demo path="./demos/input-inside-popup" compact />
+
+### Grouped
+
+Organize related options with `<Combobox.Group>` and `<Combobox.GroupLabel>` to add section headings inside the popup.
+
+<Demo path="./demos/grouped" compact />
+
+### Creatable
+
+Create a new item when the filter matches no items, opening a creation `<Dialog>`.
+
+<Demo path="./demos/creatable" compact />
+
+### Virtualized
+
+Efficiently handle large datasets using a virtualization library like `@tanstack/react-virtual`.
+
+<Demo path="./demos/virtualized" compact />
+
 ## API reference
 
 <Reference
@@ -118,42 +157,3 @@ Accepts all `Intl.CollatorOptions`, plus the following options:
     },
   }}
 />
-
-## TypeScript inference
-
-Combobox infers the item type from the `defaultValue` or `value` props passed to `<Combobox.Root>`.
-When using `itemToStringLabel` or `itemToStringValue`, the `value` prop on the `<Combobox.Item>` must match the type passed to `defaultValue` or `value`.
-When not specifying value props, the parameter's type must be explicitly specified.
-
-## Examples
-
-### Multiple select
-
-The combobox can allow multiple selections by adding the `multiple` prop to `<Combobox.Root>`.
-Selection chips are rendered with `<Combobox.Chip>` inside the input that can be removed.
-
-<Demo path="./demos/multiple" compact />
-
-### Input inside popup
-
-`<Combobox.Input>` can be rendered inside `<Combobox.Popup>` to create a searchable select popup.
-
-<Demo path="./demos/input-inside-popup" compact />
-
-### Grouped
-
-Organize related options with `<Combobox.Group>` and `<Combobox.GroupLabel>` to add section headings inside the popup.
-
-<Demo path="./demos/grouped" compact />
-
-### Creatable
-
-Create a new item when the filter matches no items, opening a creation `<Dialog>`.
-
-<Demo path="./demos/creatable" compact />
-
-### Virtualized
-
-Efficiently handle large datasets using a virtualization library like `@tanstack/react-virtual`.
-
-<Demo path="./demos/virtualized" compact />

docs/src/app/(public)/(content)/react/components/context-menu/page.mdx

@@ -40,14 +40,6 @@ import { ContextMenu } from '@base-ui-components/react/context-menu';
 </ContextMenu.Root>;
 ```
 
-## API reference
-
-<Reference component="ContextMenu" parts="Root, Trigger" />
-<Reference
-  component="Menu"
-  parts="Portal, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
-/>
-
 ## Examples
 
 [Menu](/react/components/menu#examples) displays additional demos, many of which apply to the context menu as well.
@@ -57,3 +49,11 @@ import { ContextMenu } from '@base-ui-components/react/context-menu';
 To create a submenu, create a `<ContextMenu.SubmenuRoot>` inside the parent context menu. Use the `<ContextMenu.SubmenuTrigger>` part for the menu item that opens the nested menu.
 
 <Demo path="./demos/submenu" />
+
+## API reference
+
+<Reference component="ContextMenu" parts="Root, Trigger" />
+<Reference
+  component="Menu"
+  parts="Portal, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
+/>

docs/src/app/(public)/(content)/react/components/dialog/page.mdx

@@ -30,13 +30,6 @@ import { Dialog } from '@base-ui-components/react/dialog';
 </Dialog.Root>;
 ```
 
-## API reference
-
-<Reference
-  component="Dialog"
-  parts="Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close"
-/>
-
 ## Examples
 
 ### State
@@ -252,3 +245,10 @@ Note that there is no separate `onTriggerIdChange` prop.
 Instead, the `onOpenChange` callback receives an additional argument, `eventDetails`, which contains the trigger element that initiated the state change.
 
 <Demo path="./demos/detached-triggers-controlled" />
+
+## API reference
+
+<Reference
+  component="Dialog"
+  parts="Root, Trigger, Portal, Backdrop, Viewport, Popup, Title, Description, Close"
+/>

docs/src/app/(public)/(content)/react/components/form/page.mdx

@@ -26,14 +26,14 @@ import { Form } from '@base-ui-components/react/form';
 </Form>;
 ```
 
-## API reference
-
-<Reference component="Form" />
-
 ## Examples
 
 ### Using with Zod
 
 When parsing the schema using `schema.safeParse()`, the `z.flattenError(result.error).fieldErrors` data can be used to map the errors to each field's `name`.
 
 <Demo path="./demos/zod" />
+
+## API reference
+
+<Reference component="Form" />

docs/src/app/(public)/(content)/react/components/menu/page.mdx

@@ -40,13 +40,6 @@ import { Menu } from '@base-ui-components/react/menu';
 </Menu.Root>;
 ```
 
-## API reference
-
-<Reference
-  component="Menu"
-  parts="Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
-/>
-
 ## Examples
 
 ### Open on hover
@@ -166,3 +159,10 @@ function ExampleMenu() {
   );
 }
 ```
+
+## API reference
+
+<Reference
+  component="Menu"
+  parts="Root, Trigger, Portal, Backdrop, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
+/>

docs/src/app/(public)/(content)/react/components/navigation-menu/page.mdx

@@ -39,13 +39,6 @@ import { NavigationMenu } from '@base-ui-components/react/navigation-menu';
 </NavigationMenu.Root>;
 ```
 
-## API reference
-
-<Reference
-  component="NavigationMenu"
-  parts="Root, List, Item, Trigger, Icon, Content, Link, Backdrop, Portal, Positioner, Popup, Viewport, Arrow"
-/>
-
 ## Examples
 
 ### Nested submenus
@@ -102,3 +95,10 @@ If your content is flexible, you can use the `max-height` property on `.Popup` t
 ```
 
 Native scrollbars will be visible while transitioning content, so we recommend using our [Scroll Area](/react/components/scroll-area) component instead of native scrollbars to keep them hidden, which will also allow the `Arrow` to be centered correctly.
+
+## API reference
+
+<Reference
+  component="NavigationMenu"
+  parts="Root, List, Item, Trigger, Icon, Content, Link, Backdrop, Portal, Positioner, Popup, Viewport, Arrow"
+/>