fix(Badge): render a dot-only badge as a standalone circle

[KayProject]

Resolves #309

Scope note

Two of the three items have already landed on main since the issue was filed:

• primary vs teal — primary already uses bg-brand-dim text-brand with a brand-purple border, and there's already a test asserting its classes contain no teal.
• size prop — size?: "sm" | "md" already exists, md already renders at text-[11px], and both sizes are covered by tests.

That leaves the dot-only case, which this PR implements.

The fix

<Badge dot /> with no children put a 4px dot inside a padded, bordered pill. With no text to give it width, the pill collapsed to a sliver and read as broken.

When dot is set and there are no children, the pill chrome is dropped and the dot stands on its own. Everything else is preserved: the variant's dot colour, the live region attributes, className, and prop forwarding.

"No children" covers undefined, null, false, and "" — an empty-string child is the case the issue actually describes, and it's tested.

A note on dot sizing

I kept the dot at w-1 h-1 rather than scaling it up for standalone use. The existing test "renders a standalone indicator dot when no children provided" asserts w-1/h-1 explicitly, so enlarging it would have meant rewriting an existing assertion. If you'd prefer the standalone dot to be visually larger (say w-2 h-2, optionally keyed off size), say so and I'll adjust both the component and that test.

Verification

npx vitest run src/components/ui/Badge.test.tsx — 15 passed, including 6 new cases: pill chrome dropped when standalone, chrome retained when children are present, empty-string child treated as empty, variant dot colour applied, live region still exposed, and className/prop forwarding.

Full-suite regression check (several components render <Badge dot> with children, so the padded path matters):

	Test files	Tests
main (5bc3678)	24 failed / 51 passed	61 failed / 945 passed
this branch	24 failed / 51 passed	61 failed / 951 passed

No regressions.

ESLint clean on both changed files.

Heads-up on the build AC

npm run build doesn't pass on main for unrelated reasons — unclosed blocks in FeeEstimator.tsx and SorobanPanel.tsx from a merge, which is also what the 61 pre-existing failures are. Happy to send a separate repair PR.

[drips-wave]

@KayProject Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits