Kbd

O mk-kbd exibe uma tecla ou símbolo de teclado com estilo visual consistente — padding, borda, raio, tipografia monoespaçada e sombra sutil. Renderiza a tag HTML nativa <kbd> internamente, preservando a semântica documental. É puramente visual: não é focável, não emite eventos e não possui estados interativos (hover/active/disabled). Combine múltiplas instâncias manualmente para representar atalhos compostos, por exemplo Ctrl + S.

Quando usar

• Precisar indicar visualmente uma tecla ou combinação de teclas em tooltips, menus, help text ou documentação.
• Quiser reforçar a leitura de um atalho já descrito em texto (ex.: "Pressione Ctrl+S para salvar").

• Precisar de um controle interativo de teclado — use mk-button ou outro elemento focável; mk-kbd é puramente ilustrativo.
• Precisar compor atalhos automaticamente a partir de uma lista — não há prop keys; combine instâncias manualmente para manter controle sobre separadores e i18n.

Padrão

import { MkKbd } from '@db1/makuco-ui-react';

<MkKbd>Ctrl</MkKbd>

<mk-kbd>Ctrl</mk-kbd>

Tamanhos

Quatro tamanhos disponíveis via a prop size: xs, sm, md (padrão) e lg. O tamanho controla altura, padding, tipografia e raio da borda.

<MkKbd size="xs">Esc</MkKbd>
<MkKbd size="sm">Tab</MkKbd>
<MkKbd size="md">Enter</MkKbd>
<MkKbd size="lg">Space</MkKbd>

<mk-kbd size="xs">Esc</mk-kbd>
<mk-kbd size="sm">Tab</mk-kbd>
<mk-kbd size="md">Enter</mk-kbd>
<mk-kbd size="lg">Space</mk-kbd>

Combinações

Não há prop para compor atalhos automaticamente (ex.: keys={["Ctrl", "S"]}) — combine múltiplas instâncias de mk-kbd manualmente, mantendo o controle do separador ("+", "então", espaço) e da tradução.

<span>
  <MkKbd>Ctrl</MkKbd> + <MkKbd>S</MkKbd>
</span>

<span>
  <mk-kbd>Ctrl</mk-kbd> + <mk-kbd>S</mk-kbd>
</span>

Rótulo acessível

Quando o slot contém um símbolo isolado cuja leitura literal não é útil para leitores de tela (ex.: ⌘, ⏎, ⌫), forneça a prop label — ela é aplicada como aria-label no host e tem prioridade sobre o glifo.

<MkKbd label="Command">⌘</MkKbd>

<mk-kbd label="Command">⌘</mk-kbd>

Ícone no slot

O slot default aceita qualquer conteúdo, incluindo mk-icon. Combine com label quando o ícone não tiver um rótulo acessível próprio.

import { MkIcon, MkKbd } from '@db1/makuco-ui-react';

<MkKbd label="Seta para cima">
  <MkIcon name="arrow-up" />
</MkKbd>

<mk-kbd label="Seta para cima">
  <mk-icon name="arrow-up"></mk-icon>
</mk-kbd>

Props — mk-kbd

Slots

Acessibilidade

• Internamente usa a tag <kbd> nativa, que preserva semântica documental sem exigir um role ARIA no host.
• Não é focável: não recebe tabindex e não participa da navegação por Tab. Use mk-button (ou outro elemento nativo focável) quando precisar de um controle interativo com atalho visível.
• Quando label é fornecido, ele é aplicado como aria-label no host e tem prioridade sobre o conteúdo do slot para leitores de tela.
• Quando label é omitido, o nome acessível vem do texto do slot naturalmente.
• Ao usar mk-kbd dentro de um elemento que já descreve o atalho (ex.: aria-label="Salvar (Ctrl+S)" em um mk-button), aplique aria-hidden="true" em um wrapper do mk-kbd para evitar leitura duplicada pelo leitor de tela.
• Seleção de texto é permitida — é comum copiar atalhos exibidos em documentação.