diff --git a/bestax-mcp/data/components/Navbar.json b/bestax-mcp/data/components/Navbar.json
index af9917942..408ef8d10 100644
--- a/bestax-mcp/data/components/Navbar.json
+++ b/bestax-mcp/data/components/Navbar.json
@@ -195,7 +195,7 @@
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
           "default": null,
-          "description": "Bulma color modifier for the brand.",
+          "description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-brand.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -394,7 +394,7 @@
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
           "default": null,
-          "description": "Bulma color modifier for the burger.",
+          "description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-burger.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -487,7 +487,7 @@
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
           "default": null,
-          "description": "Bulma color modifier for the menu.",
+          "description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-menu.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -543,7 +543,7 @@
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
           "default": null,
-          "description": "Bulma color modifier.",
+          "description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
           "required": false,
           "inherited": false,
           "deprecated": false
@@ -590,7 +590,7 @@
           "name": "color",
           "type": "'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'",
           "default": null,
-          "description": "Bulma color modifier.",
+          "description": "Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.",
           "required": false,
           "inherited": false,
           "deprecated": false
diff --git a/bulma-ui/src/components/Navbar.tsx b/bulma-ui/src/components/Navbar.tsx
index edb8694b0..c6eb41ac3 100644
--- a/bulma-ui/src/components/Navbar.tsx
+++ b/bulma-ui/src/components/Navbar.tsx
@@ -125,7 +125,12 @@ export interface NavbarBrandProps
   className?: string;
   /** Text color for the brand. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the brand. */
+  /**
+   * Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
+   * `.navbar-brand.is-<color>` rule, so this is not a filled variant.
+   * `textColor` takes precedence when both are set, and is the one that
+   * reaches the full color list.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Brand content. */
   children?: React.ReactNode;
@@ -142,10 +147,11 @@ export const NavbarBrand: React.FC<NavbarBrandProps> = ({
   className,
   children,
   textColor,
+  color,
   ...props
 }) => {
   const { bulmaHelperClasses, rest } = useBulmaClasses({
-    color: textColor,
+    color: textColor ?? color,
     ...props,
   });
 
@@ -276,7 +282,12 @@ export interface NavbarBurgerProps
   className?: string;
   /** Text color for the burger. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the burger. */
+  /**
+   * Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
+   * `.navbar-burger.is-<color>` rule, so this is not a filled variant.
+   * `textColor` takes precedence when both are set, and is the one that
+   * reaches the full color list.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Whether the burger is active. */
   active?: boolean;
@@ -303,8 +314,12 @@ export interface NavbarBurgerProps
  * @returns {JSX.Element} The rendered burger.
  */
 export const NavbarBurger = forwardRef<HTMLButtonElement, NavbarBurgerProps>(
-  function NavbarBurger({ className, active, children, ...props }, ref) {
+  function NavbarBurger(
+    { className, active, textColor, color, children, ...props },
+    ref
+  ) {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
+      color: textColor ?? color,
       ...props,
     });
 
@@ -349,7 +364,12 @@ export interface NavbarMenuProps
   className?: string;
   /** Text color for the menu. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the menu. */
+  /**
+   * Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
+   * `.navbar-menu.is-<color>` rule, so this is not a filled variant.
+   * `textColor` takes precedence when both are set, and is the one that
+   * reaches the full color list.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Whether the menu is active. */
   active?: boolean;
@@ -367,10 +387,13 @@ export interface NavbarMenuProps
 export const NavbarMenu: React.FC<NavbarMenuProps> = ({
   className,
   active,
+  textColor,
+  color,
   children,
   ...props
 }) => {
   const { bulmaHelperClasses, rest } = useBulmaClasses({
+    color: textColor ?? color,
     ...props,
   });
 
@@ -401,7 +424,12 @@ export interface NavbarStartEndProps
   className?: string;
   /** Text color. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier. */
+  /**
+   * Renders `has-text-<color>`, exactly like `textColor`. Bulma has no
+   * `is-<color>` rule for this area, so this is not a filled variant.
+   * `textColor` takes precedence when both are set, and is the one that
+   * reaches the full color list.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Content. */
   children?: React.ReactNode;
@@ -416,10 +444,13 @@ export interface NavbarStartEndProps
  */
 export const NavbarStart: React.FC<NavbarStartEndProps> = ({
   className,
+  textColor,
+  color,
   children,
   ...props
 }) => {
   const { bulmaHelperClasses, rest } = useBulmaClasses({
+    color: textColor ?? color,
     ...props,
   });
   return (
@@ -445,10 +476,13 @@ export const NavbarStart: React.FC<NavbarStartEndProps> = ({
  */
 export const NavbarEnd: React.FC<NavbarStartEndProps> = ({
   className,
+  textColor,
+  color,
   children,
   ...props
 }) => {
   const { bulmaHelperClasses, rest } = useBulmaClasses({
+    color: textColor ?? color,
     ...props,
   });
   return (
diff --git a/bulma-ui/src/components/__tests__/Navbar.test.tsx b/bulma-ui/src/components/__tests__/Navbar.test.tsx
index d71a0fad4..9dd893a1f 100644
--- a/bulma-ui/src/components/__tests__/Navbar.test.tsx
+++ b/bulma-ui/src/components/__tests__/Navbar.test.tsx
@@ -174,6 +174,36 @@ describe('Navbar.Brand', () => {
     );
     expect(screen.getByTestId('brand')).toHaveClass('custom-brand');
   });
+
+  it('applies textColor as a helper class and not as a DOM attribute', () => {
+    render(
+      <Navbar.Brand textColor="primary" data-testid="brand">
+        Brand
+      </Navbar.Brand>
+    );
+    const brand = screen.getByTestId('brand');
+    expect(brand).toHaveClass('has-text-primary');
+    expect(brand).not.toHaveAttribute('textColor');
+  });
+
+  it('renders color as a text color, with textColor taking precedence', () => {
+    const { rerender } = render(
+      <Navbar.Brand color="info" data-testid="brand">
+        Brand
+      </Navbar.Brand>
+    );
+    expect(screen.getByTestId('brand')).toHaveClass('has-text-info');
+
+    rerender(
+      <Navbar.Brand color="info" textColor="grey" data-testid="brand">
+        Brand
+      </Navbar.Brand>
+    );
+    const brand = screen.getByTestId('brand');
+    expect(brand).toHaveClass('has-text-grey');
+    expect(brand).not.toHaveClass('has-text-info');
+    expect(brand).not.toHaveAttribute('color');
+  });
 });
 
 describe('Navbar.Item', () => {
@@ -326,6 +356,28 @@ describe('Navbar.Burger', () => {
     render(<Navbar.Burger ref={ref} />);
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
   });
+
+  it('applies textColor as a helper class and not as a DOM attribute', () => {
+    render(<Navbar.Burger textColor="primary" data-testid="burger" />);
+    const burger = screen.getByTestId('burger');
+    expect(burger).toHaveClass('has-text-primary');
+    expect(burger).not.toHaveAttribute('textColor');
+  });
+
+  it('renders color as a text color, with textColor taking precedence', () => {
+    const { rerender } = render(
+      <Navbar.Burger color="info" data-testid="burger" />
+    );
+    expect(screen.getByTestId('burger')).toHaveClass('has-text-info');
+
+    rerender(
+      <Navbar.Burger color="info" textColor="grey" data-testid="burger" />
+    );
+    const burger = screen.getByTestId('burger');
+    expect(burger).toHaveClass('has-text-grey');
+    expect(burger).not.toHaveClass('has-text-info');
+    expect(burger).not.toHaveAttribute('color');
+  });
 });
 
 describe('Navbar.Menu', () => {
@@ -356,6 +408,36 @@ describe('Navbar.Menu', () => {
     );
     expect(screen.getByTestId('menu')).toHaveClass('custom-menu');
   });
+
+  it('applies textColor as a helper class and not as a DOM attribute', () => {
+    render(
+      <Navbar.Menu textColor="primary" data-testid="menu">
+        Menu
+      </Navbar.Menu>
+    );
+    const menu = screen.getByTestId('menu');
+    expect(menu).toHaveClass('has-text-primary');
+    expect(menu).not.toHaveAttribute('textColor');
+  });
+
+  it('renders color as a text color, with textColor taking precedence', () => {
+    const { rerender } = render(
+      <Navbar.Menu color="info" data-testid="menu">
+        Menu
+      </Navbar.Menu>
+    );
+    expect(screen.getByTestId('menu')).toHaveClass('has-text-info');
+
+    rerender(
+      <Navbar.Menu color="info" textColor="grey" data-testid="menu">
+        Menu
+      </Navbar.Menu>
+    );
+    const menu = screen.getByTestId('menu');
+    expect(menu).toHaveClass('has-text-grey');
+    expect(menu).not.toHaveClass('has-text-info');
+    expect(menu).not.toHaveAttribute('color');
+  });
 });
 
 describe('Navbar.Start & Navbar.End', () => {
@@ -378,6 +460,66 @@ describe('Navbar.Start & Navbar.End', () => {
     render(<Navbar.End data-testid="end">End</Navbar.End>);
     expect(screen.getByTestId('end')).toHaveClass('navbar-end');
   });
+
+  it('applies textColor on Navbar.Start as a helper class and not as a DOM attribute', () => {
+    render(
+      <Navbar.Start textColor="primary" data-testid="start">
+        Start
+      </Navbar.Start>
+    );
+    const start = screen.getByTestId('start');
+    expect(start).toHaveClass('has-text-primary');
+    expect(start).not.toHaveAttribute('textColor');
+  });
+
+  it('applies textColor on Navbar.End as a helper class and not as a DOM attribute', () => {
+    render(
+      <Navbar.End textColor="primary" data-testid="end">
+        End
+      </Navbar.End>
+    );
+    const end = screen.getByTestId('end');
+    expect(end).toHaveClass('has-text-primary');
+    expect(end).not.toHaveAttribute('textColor');
+  });
+
+  it('renders color as a text color on Navbar.Start, with textColor taking precedence', () => {
+    const { rerender } = render(
+      <Navbar.Start color="info" data-testid="start">
+        Start
+      </Navbar.Start>
+    );
+    expect(screen.getByTestId('start')).toHaveClass('has-text-info');
+
+    rerender(
+      <Navbar.Start color="info" textColor="grey" data-testid="start">
+        Start
+      </Navbar.Start>
+    );
+    const start = screen.getByTestId('start');
+    expect(start).toHaveClass('has-text-grey');
+    expect(start).not.toHaveClass('has-text-info');
+    expect(start).not.toHaveAttribute('color');
+  });
+
+  it('renders color as a text color on Navbar.End, with textColor taking precedence', () => {
+    const { rerender } = render(
+      <Navbar.End color="info" data-testid="end">
+        End
+      </Navbar.End>
+    );
+    expect(screen.getByTestId('end')).toHaveClass('has-text-info');
+
+    rerender(
+      <Navbar.End color="info" textColor="grey" data-testid="end">
+        End
+      </Navbar.End>
+    );
+    const end = screen.getByTestId('end');
+    expect(end).toHaveClass('has-text-grey');
+    expect(end).not.toHaveClass('has-text-info');
+    expect(end).not.toHaveAttribute('color');
+  });
 });
 
 describe('Navbar.Dropdown', () => {
diff --git a/docs/docs/api/components/navbar.md b/docs/docs/api/components/navbar.md
index 71616b1ab..93ecc483e 100644
--- a/docs/docs/api/components/navbar.md
+++ b/docs/docs/api/components/navbar.md
@@ -519,13 +519,13 @@ You can use all [Bulma helper props](../helpers/usebulmaclasses.md) with `<Navba
 
 ### Navbar.Brand
 
-| Prop        | Type                                                                            | Default | Description                                       |
-| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `className` | `string`                                                                        | —       | Additional CSS classes.                           |
-| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the brand.                         |
-| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the brand.               |
-| `children`  | `React.ReactNode`                                                               | —       | Brand content.                                    |
-| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop        | Type                                                                            | Default | Description                                                                                                                                                                                                                           |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                                                                                               |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the brand.                                                                                                                                                                                                             |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-brand.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list. |
+| `children`  | `React.ReactNode`                                                               | —       | Brand content.                                                                                                                                                                                                                        |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                     |
 
 ### Navbar.Item
 
@@ -555,49 +555,49 @@ You can use all [Bulma helper props](../helpers/usebulmaclasses.md) with `<Navba
 
 ### Navbar.Burger
 
-| Prop            | Type                                                                            | Default | Description                                                                                                                                                        |
-| --------------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `className`     | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                            |
-| `textColor`     | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the burger.                                                                                                                                         |
-| `color`         | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the burger.                                                                                                                               |
-| `active`        | `boolean`                                                                       | `false` | Whether the burger is active.                                                                                                                                      |
-| `children`      | `React.ReactNode`                                                               | —       | Custom content inside the burger, rendered after its four bar spans. Bulma styles every `<span>` in the burger as a bar, so an extra span here draws an extra bar. |
-| `aria-label`    | `string`                                                                        | —       | Aria label for accessibility.                                                                                                                                      |
-| `aria-expanded` | `boolean`                                                                       | `false` | Aria expanded state.                                                                                                                                               |
-| `onClick`       | `React.MouseEventHandler<HTMLButtonElement>`                                    | —       | Click handler.                                                                                                                                                     |
-| `ref`           | `React.Ref<HTMLButtonElement>`                                                  | —       | Ref forwarded to the burger button element.                                                                                                                        |
-| `...`           | All standard `<button>` attributes and Bulma helper props                       | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                  |
+| Prop            | Type                                                                            | Default | Description                                                                                                                                                                                                                            |
+| --------------- | ------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className`     | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                                                                                                |
+| `textColor`     | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the burger.                                                                                                                                                                                                             |
+| `color`         | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-burger.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list. |
+| `active`        | `boolean`                                                                       | `false` | Whether the burger is active.                                                                                                                                                                                                          |
+| `children`      | `React.ReactNode`                                                               | —       | Custom content inside the burger, rendered after its four bar spans. Bulma styles every `<span>` in the burger as a bar, so an extra span here draws an extra bar.                                                                     |
+| `aria-label`    | `string`                                                                        | —       | Aria label for accessibility.                                                                                                                                                                                                          |
+| `aria-expanded` | `boolean`                                                                       | `false` | Aria expanded state.                                                                                                                                                                                                                   |
+| `onClick`       | `React.MouseEventHandler<HTMLButtonElement>`                                    | —       | Click handler.                                                                                                                                                                                                                         |
+| `ref`           | `React.Ref<HTMLButtonElement>`                                                  | —       | Ref forwarded to the burger button element.                                                                                                                                                                                            |
+| `...`           | All standard `<button>` attributes and Bulma helper props                       | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                      |
 
 ### Navbar.Menu
 
-| Prop        | Type                                                                            | Default | Description                                       |
-| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `className` | `string`                                                                        | —       | Additional CSS classes.                           |
-| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the menu.                          |
-| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier for the menu.                |
-| `active`    | `boolean`                                                                       | `false` | Whether the menu is active.                       |
-| `children`  | `React.ReactNode`                                                               | —       | Menu content.                                     |
-| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop        | Type                                                                            | Default | Description                                                                                                                                                                                                                          |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `className` | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                                                                                              |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color for the menu.                                                                                                                                                                                                             |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-menu.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list. |
+| `active`    | `boolean`                                                                       | `false` | Whether the menu is active.                                                                                                                                                                                                          |
+| `children`  | `React.ReactNode`                                                               | —       | Menu content.                                                                                                                                                                                                                        |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                    |
 
 ### Navbar.Start
 
-| Prop        | Type                                                                            | Default | Description                                       |
-| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `className` | `string`                                                                        | —       | Additional CSS classes.                           |
-| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color.                                       |
-| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier.                             |
-| `children`  | `React.ReactNode`                                                               | —       | Content.                                          |
-| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop        | Type                                                                            | Default | Description                                                                                                                                                                                                                           |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                                                                                               |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color.                                                                                                                                                                                                                           |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list. |
+| `children`  | `React.ReactNode`                                                               | —       | Content.                                                                                                                                                                                                                              |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                     |
 
 ### Navbar.End
 
-| Prop        | Type                                                                            | Default | Description                                       |
-| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------- |
-| `className` | `string`                                                                        | —       | Additional CSS classes.                           |
-| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color.                                       |
-| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Bulma color modifier.                             |
-| `children`  | `React.ReactNode`                                                               | —       | Content.                                          |
-| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md) |
+| Prop        | Type                                                                            | Default | Description                                                                                                                                                                                                                           |
+| ----------- | ------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `className` | `string`                                                                        | —       | Additional CSS classes.                                                                                                                                                                                                               |
+| `textColor` | [Bulma color](../helpers/valid-values.md) \| `'inherit'` \| `'current'`         | —       | Text color.                                                                                                                                                                                                                           |
+| `color`     | `'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` | —       | Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list. |
+| `children`  | `React.ReactNode`                                                               | —       | Content.                                                                                                                                                                                                                              |
+| `...`       | All standard `<div>` attributes and Bulma helper props                          | —       | See [Helper Props](../helpers/usebulmaclasses.md)                                                                                                                                                                                     |
 
 ### Navbar.Dropdown
 
diff --git a/scripts/gen-eslint-meta.mjs b/scripts/gen-eslint-meta.mjs
index d21a032a5..17939e488 100644
--- a/scripts/gen-eslint-meta.mjs
+++ b/scripts/gen-eslint-meta.mjs
@@ -171,6 +171,21 @@ export function guardViolations({ deprecated, textAlias, knownProps }) {
           'to. Writing it would produce a prop the element does not accept.'
       );
     }
+    // The other half of the message names `bgColor` as the way to get a
+    // coloured surface, unconditionally, so that has to be true of every
+    // member too. It was true of all ten by luck rather than by check, and
+    // #757 nearly added five Navbar parts that `Omit` the background props
+    // entirely: an author taking the surface branch there would have written
+    // a prop that type-errors, renders nothing, and — via BACKGROUND_PROPS —
+    // silences the report that suggested it.
+    if (!knownProps.get(element)?.has('bgColor')) {
+      violations.push(
+        `${element} is in the text-alias set but does not declare ` +
+          '`bgColor`, which no-color-as-surface names as the way to get a ' +
+          'coloured surface. Reporting it would advise a prop the element ' +
+          'does not accept.'
+      );
+    }
   }
 
   const missing = TEXT_ALIAS_ANCHORS.filter(n => !textAlias.has(n));
diff --git a/scripts/gen-eslint-meta.test.mjs b/scripts/gen-eslint-meta.test.mjs
index 0bf5a5500..f0f79921a 100644
--- a/scripts/gen-eslint-meta.test.mjs
+++ b/scripts/gen-eslint-meta.test.mjs
@@ -100,9 +100,9 @@ describe('guardViolations', () => {
     textAlias: new Set(['Box', 'Card', 'Content']),
     knownProps: new Map([
       ['Button', new Set(['isFullWidth', 'isFullwidth'])],
-      ['Box', new Set(['color', 'textColor'])],
-      ['Card', new Set(['color', 'textColor'])],
-      ['Content', new Set(['color', 'textColor'])],
+      ['Box', new Set(['color', 'textColor', 'bgColor'])],
+      ['Card', new Set(['color', 'textColor', 'bgColor'])],
+      ['Content', new Set(['color', 'textColor', 'bgColor'])],
     ]),
   });
 
@@ -149,10 +149,23 @@ describe('guardViolations', () => {
 
   it('refuses a text-alias element that does not declare textColor', () => {
     const c = ok();
-    c.knownProps.set('Card', new Set(['color']));
+    c.knownProps.set('Card', new Set(['color', 'bgColor']));
     const v = guardViolations(c);
     assert.equal(v.length, 1);
     assert.match(v[0], /Card is in the text-alias set/);
+    assert.match(v[0], /does not declare `textColor`/);
+  });
+
+  it('refuses a text-alias element that does not declare bgColor', () => {
+    // The `ambiguous` message names `bgColor` as the surface branch with no
+    // condition attached, so an element that omits it — as the Navbar parts
+    // in #757 do — would be told to write a prop it does not accept.
+    const c = ok();
+    c.knownProps.set('Card', new Set(['color', 'textColor']));
+    const v = guardViolations(c);
+    assert.equal(v.length, 1);
+    assert.match(v[0], /Card is in the text-alias set/);
+    assert.match(v[0], /does not declare `bgColor`/);
   });
 
   it('refuses a dropped anchor, and says matches for one', () => {
@@ -166,7 +179,7 @@ describe('guardViolations', () => {
   it('reports every violation at once rather than the first', () => {
     const c = ok();
     c.knownProps.set('Button', new Set(['isFullWidth']));
-    c.knownProps.set('Box', new Set(['color']));
+    c.knownProps.set('Box', new Set(['color', 'bgColor']));
     assert.equal(guardViolations(c).length, 2);
   });
 });
@@ -249,10 +262,14 @@ describe('collect', () => {
     extractComponent: name => ({ tables: tablesFor(name) }),
   });
 
-  /** A text-alias `color` row pair, which every anchor has to carry. */
+  /**
+   * The text-alias rows every anchor has to carry: the marked `color` itself
+   * plus both props `no-color-as-surface`'s message names back at the author.
+   */
   const aliasRows = path => [
     { name: 'color', description: `Text color alias for ${path}.` },
     { name: 'textColor', description: 'Text colour.' },
+    { name: 'bgColor', description: 'Background colour.' },
   ];
 
   // The guards exist to stop a bad table being written. On the real library