Fix DBNavigationItem SSR hydration mismatch by implementing deterministic ID generation

[Copilot]

The DBNavigationItem component was causing hydration mismatches in Server-Side Rendering (SSR) environments like Nuxt 3. The issue occurred because the component used a random UUID for the subNavigationId, which generated different IDs on the server versus the client during hydration.

Problem:

// Before: Random UUID causes SSR hydration mismatch
subNavigationId: 'sub-navigation-' + uuid()
// Server: "sub-navigation-abc123"
// Client: "sub-navigation-def456" ❌ MISMATCH!

Solution:
Added a new optional subNavigationId prop and implemented deterministic ID generation with a three-tier fallback strategy:

// After: Deterministic ID generation
subNavigationId: props.subNavigationId ?? 
  (props.id ? `${props.id}-sub-navigation` : 'sub-navigation')

Usage Options:

1. Explicit ID (Recommended for SSR):

   <DBNavigationItem subNavigationId="products-submenu">
     <a href="/products">Products</a>
   </DBNavigationItem>

2. Component ID-based (Good for SSR):

   <DBNavigationItem id="nav-products">
     <a href="/products">Products</a>
   </DBNavigationItem>
   // Generates: id="nav-products-sub-navigation"

3. No props (Basic fallback):

   <DBNavigationItem>
     <a href="/products">Products</a>
   </DBNavigationItem>
   // Generates: id="sub-navigation"

Changes Made:

• Added subNavigationId?: string prop to DBNavigationItemDefaultProps
• Replaced random UUID with deterministic ID generation logic
• Added reactive prop updates via onUpdate hook
• Created comprehensive tests covering all scenarios
• Maintained full backward compatibility

Benefits:

• ✅ Resolves SSR hydration mismatches
• ✅ Backward compatible - existing code continues to work
• ✅ Provides developer control for stable IDs
• ✅ Deterministic and predictable behavior

Fixes #2395.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: node install.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c818968

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[nmerget]

could be solved by #4797

[michaelmkraus]

The fallback id="sub-navigation" can collide when multiple items don’t provide id/subNavigationId.