apps/docs/docs/components/badge/_bordered.component.ts (1)

1-13: Add unit tests for the bordered badge component

The PR description indicates that tests are missing. Consider adding unit tests to verify:

• Component creation
• Host class application
• Template rendering with different badge variants

Would you like me to help generate the unit test suite for this component?

libs/flowbite-angular/badge/badge.theme.ts (1)

67-79: Consider dark mode border color consistency

The border colors in dark mode might need adjustment. Currently, some components use darker borders in dark mode (e.g., primary uses border-primary-800), while others use lighter borders (e.g., blue uses border-blue-800). This could lead to inconsistent visual hierarchy.

Consider standardizing the dark mode border colors across all variants. For example:

-'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300 border-blue-300 dark:border-blue-800'
+'bg-blue-100 dark:bg-blue-200 text-blue-800 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300 border-blue-300 dark:border-blue-400'

apps/docs/docs/components/badge/index.md (1)

29-39: Add code examples to the documentation

While the demo component is referenced correctly, the documentation would be more helpful with actual code examples showing how to use the bordered badge, similar to other sections.

Consider adding usage examples:

## Bordered badge

Use the `[hasBorder]="true"` property to add a border to your badge:

```angular-html
<flowbite-badge [hasBorder]="true" color="primary">Primary bordered badge</flowbite-badge>
<flowbite-badge [hasBorder]="true" color="dark">Dark bordered badge</flowbite-badge>

</blockquote></details>
<details>
<summary>libs/flowbite-angular/badge/badge.component.ts (3)</summary><blockquote>

`47-50`: **Consider documenting the default value in a code comment.**

The provider registration is correct, but adding a comment explaining why false is chosen as the default would improve maintainability.

```diff
 {
+  // Default to false for backward compatibility with existing badges
   provide: FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE,
   useValue: false,
 },

---

96-99: Enhance property documentation to match other properties.

The documentation should include the @default annotation and a more detailed description, consistent with other properties in the file.

 /**
- * Set if the badge has border
+ * Controls whether the badge displays with a border.
+ * When true, applies a border style based on the current color theme.
+ *
+ * @default false
  */
 public hasBorder = model(inject(FLOWBITE_BADGE_HAS_BORDER_DEFAULT_VALUE));

---

128-128: Implementation looks good, but tests are needed.

The theme class integration is correct, but test coverage should be added for the new hasBorder property and its integration with the theme service.

Would you like me to help create test cases for:

• Default value injection
• hasBorder property binding
• Theme class generation with hasBorder

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

#!/bin/bash
# Description: Check if badge theme configuration includes border styles

# Search for border-related styles in badge theme files
rg -l "border" libs/flowbite-angular/badge/badge.theme.ts

# Check badge theme interface for border properties
ast-grep --pattern 'interface BadgeProperties {
  $$$
  hasBorder: $_
  $$$
}'

#!/bin/bash
# Let's check the actual theme implementation for border styles
rg -A 5 "border" libs/flowbite-angular/badge/badge.theme.ts

# Also check the theme service implementation
rg -A 5 "hasBorder" libs/flowbite-angular/badge/badge.theme.service.ts