[thetaPC]

Issue number: internal

---

What is the current behavior?

The md note is 14px with an inherited line height and letter spacing. Inside md items and item dividers, the parent shrinks it to 11px and adds 18px above and 10px below a note in the start or end slot.

What is the new behavior?

The md note matches the caption style Material Design 2 uses for a list's metadata (Material Components Web 14 and the MD2 kit):

• 12px font size, 1rem (16px) line height, and 0.0333em (0.4px) letter spacing
• Items and item dividers no longer set the note's size, so a note is 12px everywhere in md. In the ionic theme, a note in an item divider now uses the note's own 14px instead of 11px
• A note in the start or end slot of an item or item divider starts 16px from the top with no space below it, like a native MD2 list row. Its baseline stays 28px from the top, so items keep their height. A note no longer makes an item divider taller: one with an ion-label is 40px instead of 42px, and one without is 33px
• Removes the item divider's unused note tokens: font size, margin, and the zero padding values

The note keeps its current color. MDC's 38% hint color fails contrast, and native MD2 lists use high emphasis.

Does this introduce a breaking change?

• Yes
• No

The md note is smaller and now sets its line height and letter spacing. To revert to the previous appearance, set IonNote.font.size, IonNote.line.height and IonNote.letterSpacing for global styles, or --ion-note-font-size, --ion-note-line-height and --ion-note-letter-spacing for component-specific styles. To keep 11px notes in items and item dividers, set --ion-note-font-size on them, such as ion-item ion-note.

Other information

Known gaps

• The md item divider is shorter than an MD2 row (48px) when it holds only a note or text. Its height, and centering the note in the ionic item divider, are tracked as a follow-up to sync the item divider
• In an md item divider, the note sits 2px below the label's baseline (it was 1px before). Aligning them is tracked with the same follow-up

How to test

Check	Before	After	What to look for
md	Before	After	"Default Note" is smaller (12px instead of 14px). Notes in items are slightly larger (12px instead of 11px) and stay on the same line. Rows keep their height
md item divider		Preview	New section at the bottom, laid out like the items above it. The dividers are 40px instead of 42px. The note-item-divider-* snapshots show the before
ios and ionic	ios, ionic		Nothing changes

Only md snapshots change, plus the ionic font scaling snapshot for the item divider note's size.

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Nov 12, 2026 11:48pm UTC

[thetaPC]

Native MD2 for comparison: Compose Material's ListItem with a trailing caption, the same role as a slotted note. Left is the plain render, right shows layout bounds.

• In two- and three-line rows, the caption sits at the top, with its baseline 28dp from the top
• Nothing is added below the caption, so the row's height comes from the text, not the caption

That's why the note keeps 16px above it and drops the 10px below. It matches native, and a note no longer makes an item divider taller.

[thetaPC]

This is expected based on my findings on native.

[brandyscarney]

Optional requests, but looks good!

[ShaneK]

Looks good to me, just one optional screenshot nit!

[ShaneK]

Suggested change

	test.describe(title('note: item-divider'), () => {
	test.describe(title('note: item-divider'), () => {
	test('should not have visual regressions when next to a label in an item-divider', async ({ page }) => {
	await page.setContent(
	`
	<ion-item-divider>
	<ion-label>Label</ion-label>
	<ion-note slot="end">99</ion-note>
	</ion-item-divider>
	`,
	config
	);
	const itemDivider = page.locator('ion-item-divider');
	await expect(itemDivider).toHaveScreenshot(screenshot(`note-item-divider-label`));
	});

Could we add a screenshot for a divider with a label and a note? The test page has three of those now, but the item-divider screenshots only cover a note on its own, so the md height change for that case (42px to 40px) is only checked by hand. This test fails against the base branch in md and ionic, so it does catch the change here. It'll need new note-item-divider-label snapshots from CI. Nit though, up to you!

[thetaPC]

Done in d3abbfe