---

## Kbd
Keyboard-key hint. Renders one or more keys as a compact, physical-looking
keycap — the canonical way to show shortcuts (⌘K, Ctrl + S) in menus, tooltips, command
palettes and docs. Pure display; emits a semantic `<kbd>` element.

**Import:** `import { Kbd } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Kbd keys="⌘K" />
```

```svelte
<Kbd keys={['Ctrl', 'K']} />
```

### Variants
- size: lg, md, sm (default: md)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
| ...KbdVariants | `VariantProps` | no |  | Styling variants from KbdVariants |
| children | `Snippet` | no |  | Custom content; overrides `keys`. |
| class | `string` | no |  | Additional CSS class merged onto the root `<kbd>`. |
| keys | `string | string[]` | no |  | The key(s) to display. A single string renders one label; an array renders each entry joined by `separator` (e.g. `['Ctrl', 'K']` → `Ctrl + K`). Ignored when `children` is provided. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Kbd: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic palette — presets keep dark-mode logic coherent and reusable. |
| separator | `string` | no | '+' | Separator rendered between multiple `keys`. |
| size | `'sm' | 'md' | 'lg'` | no |  | Keycap size — sm, md (default), lg. |
| slotClasses | `Partial<Record<KbdSlots, string>>` | no |  | Per-slot class overrides. Slots: base | separator |
| unstyled | `boolean` | no |  | Strip all default styles; combine with slotClasses to rebuild from scratch. |

Inherited from:
- KbdVariants (external)
- Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> (omit-pattern)

### Slots (slotClasses keys)
`base`, `separator`