feat(mosaic): add inset outline to Avatar with a bordered prop

[alexcarpenter]

Description

Adds a 1px inset outline to the Mosaic Avatar so a photo or fallback that shares the page's background still reads as a bounded shape. The line is drawn with outline and a -1px offset on Avatar.Image and Avatar.Fallback, so it never shrinks the box and never collides with the focus ring on an interactive root.

Figma's border-overlay has no Mosaic token, so the colour is --cl-color-neutral-alpha-100: the translucent twin of --cl-color-border, which lands at the same weight over a matching background and still shows over an image.

Avatar.Root gains a bordered prop (default true, reflected as data-bordered) so a consumer can drop the outline. Swingset gets the knob and the prop docs.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

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

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Sep 17, 2026 7:14pm UTC
swingset	Ready	Preview	Sep 17, 2026 7:14pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 6d70b30

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/mosaic	Minor
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Team

Run ID: 70c42f38-4cbf-4b87-a37a-a296f94c11b1

📥 Commits

Reviewing files that changed from the base of the PR and between 87f161a and 6d70b30.

📒 Files selected for processing (6)

• .changeset/mosaic-avatar-inset-outline.md
• packages/mosaic/src/components/avatar/avatar.styles.ts
• packages/mosaic/src/components/avatar/avatar.test.tsx
• packages/mosaic/src/components/avatar/avatar.tsx
• packages/swingset/src/stories/avatar.mdx
• packages/swingset/src/stories/avatar.stories.tsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• clerk/clerk_go (manual)
• clerk/dashboard (manual)
• clerk/accounts (manual)
• clerk/backoffice (manual)
• clerk/clerk (manual)
• clerk/clerk-docs (manual)
• clerk/cloudflare-workers (manual)
• clerk/cli (auto-detected)
• clerk/clerk-ios (auto-detected)
• clerk/clerk-android (auto-detected)

Included review availability: 0 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 4 reviews per hour.

---

📝 Walkthrough

Walkthrough

Avatar.Root now accepts bordered, which defaults to true. The state reaches image and fallback components through context and applies a 1px inset outline. Setting bordered={false} removes the outline and the data-bordered attribute. Tests cover both states. Avatar stories and documentation describe the new option, and a minor changeset records it.

Priority: ⬇️ Low

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

Suggested reviewers: ephem

Merge Risk: ⚪ Minimal · up to 6d70b

The new Avatar outline option is documented and tested for its default and opt-out behavior. No actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 4 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the main change: an inset outline and the new bordered prop for Avatar.
Description check	✅ Passed	The description accurately explains the inset outline, bordered prop, implementation details, tests, and documentation updates.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 4 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9815

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9815

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9815

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9815

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9815

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9815

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9815

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9815

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9815

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9815

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9815

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9815

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9815

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9815

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@9815

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9815

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9815

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9815

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9815

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9815

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9815

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9815

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9815

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9815

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9815

commit: 6d70b30

[maxyinger]

80 line pr to add a 1px border. sheesh.