From ae02f23a8c68529d55fcb85d247fc252ec8a0613 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 14 May 2023 17:06:08 +0200
Subject: [PATCH] chore(Kbd): usage with `value` prop

---
 .../content/examples/KbdExample.vue           |  2 +-
 docs/content/2.elements/6.kbd.md              | 23 ++++++++++++++++++-
 src/runtime/components/elements/Kbd.vue       |  6 ++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/docs/components/content/examples/KbdExample.vue b/docs/components/content/examples/KbdExample.vue
index c85eb57e..4eac225e 100644
--- a/docs/components/content/examples/KbdExample.vue
+++ b/docs/components/content/examples/KbdExample.vue
@@ -5,6 +5,6 @@ const { metaSymbol } = useShortcuts()
 <template>
   <div class="flex items-center gap-0.5">
     <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>U</UKbd>
+    <UKbd>K</UKbd>
   </div>
 </template>
diff --git a/docs/content/2.elements/6.kbd.md b/docs/content/2.elements/6.kbd.md
index 231ff3c7..45db0e42 100644
--- a/docs/content/2.elements/6.kbd.md
+++ b/docs/content/2.elements/6.kbd.md
@@ -7,6 +7,27 @@ navigation:
 
 ## Usage
 
+Use the default slot to set the text of the Kbd.
+
+::component-card
+---
+code: K
+---
+
+K
+::
+
+You can also use the `value` prop:
+
+::component-card
+---
+props:
+  value: K
+---
+::
+
+As explained in the [Shortcuts](/getting-started/shortcuts) page, you can use the `metaSymbol` property of the `useShortcuts` composable to display the meta key according to the user's OS.
+
 ::component-example
 #default
 :kbd-example
@@ -20,7 +41,7 @@ const { metaSymbol } = useShortcuts()
 <template>
   <div class="flex items-center gap-0.5">
     <UKbd>{{ metaSymbol }}</UKbd>
-    <UKbd>U</UKbd>
+    <UKbd>K</UKbd>
   </div>
 </template>
 ```
diff --git a/src/runtime/components/elements/Kbd.vue b/src/runtime/components/elements/Kbd.vue
index 1a360a47..d90b040b 100644
--- a/src/runtime/components/elements/Kbd.vue
+++ b/src/runtime/components/elements/Kbd.vue
@@ -1,6 +1,6 @@
 <template>
   <kbd :class="[ui.base, ui.size[size], ui.padding, ui.rounded, ui.font, ui.background, ui.ring]">
-    <slot />
+    <slot>{{ value }}</slot>
   </kbd>
 </template>
 
@@ -17,6 +17,10 @@ import appConfig from '#build/app.config'
 
 export default defineComponent({
   props: {
+    value: {
+      type: String,
+      default: null
+    },
     size: {
       type: String,
       default: () => appConfig.ui.kbd.default.size,