design: add bottom-nav badge scheme

[Devadakene]

Closes #326

Summary

This change publishes a consistent badge scheme on the bottom-nav to clearly convey updates to users. It introduces two badge variants (dot for simple presence and count for specific numbers) and implements an overflow rule that caps numbers above 99 to 99+. Additionally, it includes utility functions to automatically generate proper aria-labels to announce the badge state correctly to screen readers.

Design Review Checklist

♿ Accessibility

• Contrast ratios meet WCAG 2.1 AA (4.5:1). (Checked against active + inactive states)
• Keyboard navigation is logical and focus rings are visible.
• Semantic HTML and ARIA labels are used correctly. (Proper screen-reader announcements added for counts)

📱 Responsive

• Layout is mobile-first and works on all breakpoints.
• Above-the-fold content is optimized for laptop viewports.

⚙️ States & Tokens

• Loading, empty, and error states are handled.
• Design tokens (spacing, helper-text classes) are followed.

Screenshots / Record

Nil

Testing

Tested with 100% unit test coverage for the badge functions (handling singular/plural counts and 99+ boundary). Edge cases including four-digit counts and dark mode were verified.

• npm run lint passes
• Manual keyboard/screen-reader test

---

[drips-wave]

@Devadakene 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