fix(bulma-ui): merge className into Navbar.Divider instead of overwriting it

bestax-mcp/data/skills.json

@@ -103,7 +103,7 @@
         {
           "id": "bulma-classes-component-map",
           "file": "references/bulma-classes/component-map.md",
-          "bytes": 14392
+          "bytes": 14319
         },
         {
           "id": "bulma-classes-prop-map",
@@ -113,7 +113,7 @@
         {
           "id": "bulma-classes-unmappables",
           "file": "references/bulma-classes/unmappables.md",
-          "bytes": 15743
+          "bytes": 15628
         },
         {
           "id": "css-migration",

bulma-ui/src/components/Navbar.tsx

@@ -796,10 +796,14 @@ export const NavbarDropdownMenu: React.FC<NavbarDropdownMenuProps> = ({
  * @param {React.HTMLAttributes<HTMLHRElement>} props - Standard hr props.
  * @returns {JSX.Element} The rendered divider.
  */
-export const NavbarDivider: React.FC<
-  React.HTMLAttributes<HTMLHRElement>
-> = props => (
-  <hr className={usePrefixedClassNames('navbar-divider')} {...props} />
+export const NavbarDivider: React.FC<React.HTMLAttributes<HTMLHRElement>> = ({
+  className,
+  ...props
+}) => (
+  <hr
+    className={classNames(usePrefixedClassNames('navbar-divider'), className)}
+    {...props}
+  />
 );
 
 // Attach subcomponents

bulma-ui/src/components/__tests__/Navbar.test.tsx

@@ -427,6 +427,13 @@ describe('Navbar.Dropdown', () => {
     expect(divider).toHaveClass('navbar-divider');
   });
 
+  it('merges a custom className with navbar-divider instead of replacing it', () => {
+    render(<Navbar.Divider className="my-2" data-testid="divider" />);
+    const divider = screen.getByTestId('divider');
+    expect(divider).toHaveClass('navbar-divider');
+    expect(divider).toHaveClass('my-2');
+  });
+
   it('starts closed by default and can be controlled externally via active', () => {
     const { rerender } = render(
       <Navbar.Dropdown data-testid="dropdown">

skills/bestax-migrate/references/bulma-classes/component-map.md

@@ -98,8 +98,7 @@ that doesn't gets a `defaults:Navbar` TODO. A `.has-dropdown` item becomes a `Na
 keeps `has-dropdown` as a class, because a `Navbar.Dropdown` would give the `.navbar-link` inside
 it dropdown semantics the markup didn't have. That link and the `.navbar-burger` stay markup with
 a `family:<class>` TODO; converting either means building the dropdown or the toggle with bestax,
-by hand. A `.navbar-divider` converts only when it carries no other class, since
-`Navbar.Divider` drops its own class for a `className` it's given.
+by hand. A `.navbar-divider` converts only when it carries no other class.
 
 Form markup converts piece by piece: `.field` to `Field`, `.control` to `Control`, the input
 and textarea to `InputBase` and `TextAreaBase`, the controls without wrappers of their own, and a

skills/bestax-migrate/references/bulma-classes/unmappables.md

@@ -45,8 +45,7 @@ children from the JSX inside it, so children passed as an attribute are content
 Move them inside the element, then re-run.
 
 `attr:className` is a `.navbar-divider` with another class on it (`<hr className="navbar-divider
-mt-2">`). `Navbar.Divider` drops its own class for a `className` it's given, so the conversion
-would lose `.navbar-divider`. Keep the element as markup, or move the extra class off it.
+mt-2">`). Keep the element as markup, or move the extra class off it.
 
 On a `.select` or a `.breadcrumb` it's about the element inside, which the component renders
 itself. `SelectBase` gives its `<select>` every attribute it's given and no class but