fix(Avatar): forward attrs to root when there is no image

[lazerg]

🔗 Linked issue

Resolves #6896

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Avatar sets inheritAttrs: false and never binds $attrs on its root. Without a src the attributes went through a Slot around the default slot, so they landed on whatever ended up inside the avatar. With nothing but the fallback there, <UDropdownMenu><UAvatar alt="TEST" /></UDropdownMenu> rendered the trigger id, aria-haspopup, aria-expanded and data-state on the inner <span data-slot="fallback"> instead of the root.

That inner span is only as wide as the initials, so the menu anchored to the text rather than to the circle and clicking anywhere else on the avatar did nothing. Themes keyed on data-[state=open] on the root were also never applied. The same thing was reported before in #2923, #3699 and #3710, and each time the attributes were moved further down rather than up to the root.

They now go to the root whenever no image is rendered, which covers the fallback, the icon, a custom default slot and a src that fails to load. When an image is rendered they still go to the <img>, the same split as Banner, so the native <img> attributes documented on this component (loading, crossorigin, …) keep working. One case is left out: with the chip prop the root is a UChip, which forwards its own $attrs to its slot, so the attributes still end up on the avatar content there.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 9e35ca79-85d1-4b0f-83f2-4cfb9068e263

📥 Commits

Reviewing files that changed from the base of the PR and between 01f7cc8 and 24863e8.

📒 Files selected for processing (1)

• src/runtime/components/Avatar.vue

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.

---

📝 Walkthrough

Walkthrough

Avatar now forwards attributes to the root element when no image source exists or the image has errored. With an image source, attributes remain on the image element. The fallback content now renders through a direct default slot without the Slot primitive or an explicit data-slot override. Tests cover attribute placement in both states.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 24863

This localized fix forwards Avatar attributes to the correct root or image element, restoring expected anchoring and state styling without introducing an actionable merge-blocking risk. It is merge-ready after normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the Avatar attribute-forwarding fix when no image is rendered.
Description check	✅ Passed	The description explains the reported Avatar bug, the affected rendering cases, and the implemented attribute-forwarding behavior.
Linked Issues check	✅ Passed	The changes address issue #6896 by forwarding attributes to the Avatar root when no image renders, while preserving forwarding to the image when an image renders. The added tests cover the primary cas…
Out of Scope Changes check	✅ Passed	The implementation and tests are limited to Avatar attribute forwarding and directly support issue #6896. No unrelated code changes are identified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

Full details: Linked Issues check

Explanation

The changes address issue #6896 by forwarding attributes to the Avatar root when no image renders, while preserving forwarding to the image when an image renders. The added tests cover the primary cases.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/runtime/components/Avatar.vue

Parsing error: Unexpected token )

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codspeed-hq]

Merging this PR will improve performance by 11.03%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 30 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	plain <button>	1.3 ms	1.2 ms	+11.03%

Tip

Curious why performance improved? Comment @codspeedbot explain why performance improved on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing lazerg:fix/issue-6896-avatar-root-attrs (24863e8) with v4 (ae24311)}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6898

commit: 24863e8

[lazerg]

The failing playground job is not caused by this change. It fails the same way on v4 itself, where @nuxt/content stops the Prepare step with a missing better-sqlite3 error.