Kbd experimental

<script lang="ts">
  import { Kbd } from '@odbd/svelte'

  const shortcuts = [
    { label: '명령 메뉴', keys: ['Ctrl', 'K'] },
    { label: '저장', keys: ['Ctrl', 'S'] },
    { label: '줄바꿈', keys: ['Shift', 'Enter'] },
  ] as const
</script>

<div class="kbd-demo">
  {#each shortcuts as shortcut}
    <div class="kbd-demo__row">
      <span>{shortcut.label}</span>
      <span class="kbd-demo__keys">
        {#each shortcut.keys as key}
          <Kbd>{key}</Kbd>
        {/each}
      </span>
    </div>
  {/each}
</div>

<style>
  .kbd-demo {
    display: grid;
    width: min(100%, 30rem);
    gap: var(--odbd-space-2);
  }

  .kbd-demo__row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--odbd-space-4);
    gap: var(--odbd-space-4);
    color: var(--odbd-color-foreground);
    font-size: var(--odbd-font-size-sm);
  }

  .kbd-demo__keys {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--odbd-space-1);
  }
</style>