Adding spinner

docs/src/components/kbd.njk

@@ -20,15 +20,15 @@ toc:
 {% set code_html %}
 <div class="flex flex-col items-center gap-4">
   <span class="inline-flex items-center gap-1">
-    <kbd>⌘</kbd>
-    <kbd>⇧</kbd>
-    <kbd>⌥</kbd>
-    <kbd>⌃</kbd>
+    <kbd class="kbd">⌘</kbd>
+    <kbd class="kbd">⇧</kbd>
+    <kbd class="kbd">⌥</kbd>
+    <kbd class="kbd">⌃</kbd>
   </span>
   <span class="inline-flex items-center gap-1">
-    <kbd>Ctrl</kbd>
+    <kbd class="kbd">Ctrl</kbd>
     <span>+</span>
-    <kbd>B</kbd>
+    <kbd class="kbd">B</kbd>
   </span>
 </div>
 {% endset %}
@@ -38,11 +38,11 @@ toc:
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
 <section class="prose">
-  <p>Simply use the <code>&lt;kbd&gt;</code> element:</p>
+  <p>Use the <code>&lt;kbd&gt;</code> element with the <code>kbd</code> class:</p>
 </section>
 
 {% set code_simple %}
-<kbd>⌘K</kbd>
+<kbd class="kbd">⌘K</kbd>
 {% endset %}
 
 {{ code_block(code_simple | prettyHtml, "html") }}
@@ -55,8 +55,8 @@ toc:
 <p class="text-muted-foreground text-sm">
   Use
   <span class="inline-flex items-center gap-1">
-    <kbd>Ctrl + B</kbd>
-    <kbd>Ctrl + K</kbd>
+    <kbd class="kbd">Ctrl + B</kbd>
+    <kbd class="kbd">Ctrl + K</kbd>
   </span>
   to open the command palette
 </p>
@@ -68,8 +68,8 @@ toc:
 
 {% set button_html %}
 <div class="flex flex-wrap items-center gap-x-4">
-  <button class="btn-sm-outline pr-2">Accept <kbd>⏎</kbd></button>
-  <button class="btn-sm-outline pr-2">Cancel <kbd>Esc</kbd></button>
+  <button class="btn-sm-outline pr-2">Accept <kbd class="kbd">⏎</kbd></button>
+  <button class="btn-sm-outline pr-2">Cancel <kbd class="kbd">Esc</kbd></button>
 </div>
 {% endset %}