docs(updating): update v9 migration guide to add missing breaking changes

[brandyscarney]

This PR does the following:

• Splits Vue & Vue Router to separate sections to match React & React Router
• Reorganizes the components so they're in alphabetical order
• Adds the breaking change sections for the following PRs:
  • Input
  • Textarea
  • Select
• Adds the missing breaking changes for Modal & Router Outlet

Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-docs	Ready	Preview	Aug 6, 2026 8:34pm

[thetaPC]

LGTM

[ShaneK]

Looks good, but I noticed some issues. Mostly nits, some of them - like the vue router version specificity - should be fixed before merging though

[ShaneK]

Suggested change

	- Usages such as `ion-picker-legacy` or `IonPickerLegacy` should be changed to `ion-picker` and `IonPicker`, respectively. Review the [Picker in Modal documentation](../api/picker.md#picker-in-modal) for more information.
	- Replace `ion-picker-legacy` with `ion-picker`, and `ion-picker-legacy-column` with `ion-picker-column`. Since `ion-picker` renders inline instead of as an overlay, present it inside an `ion-modal` to keep the previous experience. Review the [Picker in Modal documentation](../api/picker.md#picker-in-modal) for more information.

I think we lost something important in this rewrite. The old wording said the path forward was ion-picker inside a modal, and now it reads as a straight tag rename, which won't get anyone back to what they had. Following it literally leaves you with a picker in the page where you used to get an overlay. The column mapping went missing too, even though the sentence above still names ion-picker-legacy-column. This is the one thing a reader has to actually do, so I'd want it sorted before approving.

[ShaneK]

Suggested change

The minimum height of textarea in Material Design (`md` mode) has been increased from `56px` to `72px`. This change ensures consistent heights across textareas regardless of the `fill` property or `labelPlacement`, providing a more uniform and predictable user experience. If you were relying on textareas being `56px` tall or had custom CSS based on that value, you will need to either update your styles to accommodate the new `72px` height or override it back to `56px` if needed.

The minimum height of textarea in Material Design (`md` mode) has been increased from `56px` to `72px`. Textareas are now the same height regardless of the `fill` property or `labelPlacement`. If you were relying on textareas being `56px` tall or had custom CSS based on that value, update your styles for the new `72px` height or override it back to `56px`.

Mostly a wording nit, "ensures" plus "providing a more uniform and predictable user experience" reads like marketing copy next to the rest of the guide. The more useful half: "override it back to 56px" doesn't say what to override, so worth naming the CSS variable or selector if there is one.

[ShaneK]

This heading text repeats under Select and Textarea, so the built page ends up with #internal-dom-structure-changes, -1 and -2, numbered by document order. Same deal for the autocorrect heading across Input and Searchbar. Nothing links to them today so nothing's broken, but since this PR also establishes alphabetical ordering under Required Changes, the next component landing before Input with a DOM section would quietly renumber them all. Qualifying each with its component name would sort it. Just a nit though, no worries if you'd rather leave it.

[ShaneK]

Suggested change

	npm install vue-router@latest
	npm install vue-router@5

React Router is pinned to @6 further up for the same reason, and this section says v6 removes the next() callback form, so @latest starts installing an unsupported major the day it ships.