<script setup lang="ts">
/**
 * Kbd — keyboard shortcut key chip, rendered as <kbd>.
 * Uses mono font and inset border + bottom shadow to mimic a physical key.
 * No props — purely a presentational slot wrapper; native attrs fall through.
 */
</script>

<template>
  <kbd class="cc-kbd"><slot /></kbd>
</template>

<style>
.cc-kbd {
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px;
  font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1; color:var(--text-secondary);
  background:var(--surface-raised-2); border-radius:var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--border-default), 0 1px 0 var(--border-default);
}
</style>
