feat(ui): add css :target deeplinks to CodeTabs

[joebasrawi]

Description

Implements deep linking for CodeTabs with pure HTML/CSS, following @ovflowd’s direction on nodejs#9140. Radix Tabs are no longer used for this component; tab switching is done with fragment links and :target.

Clicking a tab is an <a href="#id">, so the URL updates natively. Loading /path#id selects that tab via CSS. No hashchange listeners.

This draft currently targets joebasrawi/nodejs.org. It should be opened against nodejs/nodejs.org main (the Cursor GitHub App could not create that cross-fork PR). From this fork:

gh pr create --repo nodejs/nodejs.org \
  --head joebasrawi:cursor/feat-codetabs-anchor-deeplinks-13a9 \
  --base main \
  --title "feat(ui): add css :target deeplinks to CodeTabs"

How :target works

• Each tab label is an <a id="…" href="#…">.
• CSS :target styles the active trigger.
• The matching panel is shown with :has(.trigger:nth-child(n):target).
• If this CodeTabs instance does not contain the current fragment (no hash, unmatched hash, or another group’s tab), [data-default] (first tab, or defaultTab / defaultValue) is shown.

ID scheme

Situation	Fragment
Optional groupId	{slug(groupId)}-{slug(tabKey)} e.g. install-js-0
Default (no groupId)	codetabs-{useId}-{slug(tabKey)} e.g. codetabs-r1-js-0

MDX already uses tabKey = {language}-{index}. useId makes multiple CodeTabs on one page unique. Authors can pass groupId for stable, human-readable permalinks.

Common/Tabs is unchanged and still uses Radix.

Validation

• @node-core/ui-components unit tests: initial #id selects the right tab, clicks update location.hash, hash navigation between tabs, unmatched hash keeps the default, two CodeTabs on one page do not collide.
• pnpm --filter @node-core/ui-components test:unit passing (60 tests).
• Package lint:js, lint:css, and lint:types passing.

Related Issues

Fixes nodejs#9140
Closes nodejs#9140

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run the relevant package tests (@node-core/ui-components unit tests).
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

  

[joebasrawi]

Superseded by nodejs#9144