Code groups

Several fences become one set of keyboard-navigable tabs when they are wrapped in <blasdoc-code-group> and each carries a tab="…".

Writing one

<blasdoc-code-group>
 
```bash tab="npm"
npm install @blasdoc/core
```
 
```bash tab="pnpm"
pnpm add @blasdoc/core
```
 
```bash tab="bun"
bun add @blasdoc/core
```
 
</blasdoc-code-group>

npm install @blasdoc/core

The keyboard contract

Exactly one tab is focusable at a time, the panel is labelled by its tab, and the selected tab carries aria-selected. That is the WAI-ARIA tabs pattern, and it comes from @blasdoc/components rather than from the theme.

Mixed languages

Tabs do not have to share a language — a group is a good way to show the same step in a config file and in a terminal.

<blasdoc-code-group>
 
```json tab="project.json"
{ "loader": { ".md": "text" } }
```
 
```ts tab="vite.config.mts"
export default defineConfig({ plugins: [blasdoc(), angular()] });
```
 
</blasdoc-code-group>