chore(Kbd): usage with value prop

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>

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>
 ```

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,