New design: Kbd component

[memagu]

🧩 Summary

Look at title

🔗 Related issues (if any)

Closes #961

📸 Screenshots / recordings (if applicable)

Run and look or smth

💬 Other information

None

[SLUCHABLUB]

Set lajte knas ut

[SLUCHABLUB]

Också, src/routes/+page.svelte borde nog återställas innan vi mergar

[SLUCHABLUB]

Också, från instruktionerna (#947)

Important: Make a commit immediately after adding the component, and make a separate commit for your changes. It's easier to review what is your changes vs shadcn that way.

[christofergartner]

Does NOT work on my machine. Safari macOS 26.3.

[SLUCHABLUB]

Safari macOS

User error

[SLUCHABLUB]

As per my last review, it is hard to see what is changed from shadcn, I'd reccomend rebasing. Nonetheless, running the first example on the kbd page i get an error.

<div class="flex flex-col items-center gap-4">
 <Kbd.Group>
  <Kbd.Root>⌘</Kbd.Root>
  <Kbd.Root>⇧</Kbd.Root>
  <Kbd.Root>⌥</Kbd.Root>
  <Kbd.Root>⌃</Kbd.Root>
 </Kbd.Group>
 <Kbd.Group>
  <Kbd.Root>Ctrl</Kbd.Root>
  <span>+</span>
  <Kbd.Root>B</Kbd.Root>
 </Kbd.Group>
</div>

This gives me Cannot read properties of undefined (reading 'toLowerCase'). Seems that the symbol prop was somehow set to undefined. The call does not appear in the shadcn code.

[memagu]

Thanks will fix!

[memagu]

Fully reworked component and correctly committed component addition before customization for a clearer diff.

NOTE: New version was force pushed to alter commit history and thus nuked my previous slop :D

Key features:

• Support for pressing multiple keys simultaneously.
• Optional case insensitivity for trigger keys

Successfully tested with:

<script>
  import NotImplemented from "$lib/components/NotImplemented.svelte";
  import { Kbd, KbdGroup } from "$lib/components/ui/kbd";
  import Footer from "./(app)/Footer.svelte";
  import Navbar from "./(app)/Navbar.svelte";
</script>

<nav class="contents">
  <Navbar />
</nav>

<div class="flex flex-col items-center gap-4">
  <KbdGroup>
    <Kbd symbol="⌘" trigger="Meta" />
    <Kbd symbol="⇧" trigger="Shift" />
    <Kbd symbol="⌥" trigger="Alt" />
    <Kbd symbol="⌃" />
  </KbdGroup>
  <KbdGroup>
    <Kbd symbol="Ctrl" trigger="Control" />
    <span>+</span>
    <Kbd symbol="B" caseInsensitive />
  </KbdGroup>
</div>

<NotImplemented />
<Footer />

NOTE: The API is a bit different from the ChadCN example as can be seen above. This is due to the interactive nature of our version.

Producing the following with alt/option and ctrl held down:

Safari (🤡) not supported

[SLUCHABLUB]

Only one question, otherwise it looks great. Good job!

[SLUCHABLUB]

Looks good! I assume that it works on MacOS now too.

[memagu]

Looks good! I assume that it works on MacOS now too.

@christofergartner pls test, haven't been able to test Safari.

[memagu]

@Fiery-132 Verified on Safari!