[Task](ui): Adjust Badge default styles for consistent rendering

[edda]

Summary

The Badge component has justify-center and items-center in its base styles, but these CSS properties only take effect when the element has display: flex or display: inline-flex. Currently, inline-flex is only applied conditionally when the icon prop is truthy, which means badges without icons don't benefit from the alignment properties.

Current Behavior

const badgeBaseStyles = `
  jn:rounded
  jn:text-sm
  jn:text-theme-default
  jn:py-0.5
  jn:px-1
  jn:justify-center   // ❌ No effect without display: flex
  jn:items-center     // ❌ No effect without display: flex
`

// In render - inline-flex only applied when icon is present:
${icon ? "jn:inline-flex" : ""}

This leads to inconsistent text alignment in badges without icons.

Expected Behavior

All badges should have consistent alignment regardless of whether an icon is present.

Proposed Solution

Move jn:inline-flex into the base styles so it's always applied:

const badgeBaseStyles = `
  jn:inline-flex      // ✅ Always applied
  jn:rounded
  jn:text-sm
  jn:text-theme-default
  jn:py-0.5
  jn:px-1
  jn:justify-center   // ✅ Now works
  jn:items-center     // ✅ Now works
`

And remove the conditional ${icon ? "jn:inline-flex" : ""} from the render.

Why This Is Safe

• inline-flex still flows inline with surrounding text (similar to inline or inline-block)
• The Badge is a <span>, so inline display is the expected behavior
• This makes the existing justify-center and items-center styles actually work
• No breaking changes to the component API

Acceptance Criteria

• Badge always has inline-flex applied in base styles
• Conditional inline-flex removed from render
• Existing Badge tests pass
• Badges without icons align consistently with badges that have icons