Added kbd and command

src/css/basecoat.css

@@ -442,6 +442,85 @@
   }
 }
 
+/* Command */
+@layer components {
+  .command {
+    @apply inset-y-0 opacity-0 transition-all transition-discrete;
+
+    &:is([open],:popover-open) {
+      @apply opacity-100;
+
+      &::backdrop {
+        @apply opacity-100;
+      }
+      > article {
+        @apply scale-100;
+      }
+
+      @starting-style {
+        @apply opacity-0;
+
+        &::backdrop {
+          @apply opacity-0;
+        }
+        > article {
+          @apply scale-95;
+        }
+      }
+    }
+    &::backdrop {
+      @apply bg-black/50 opacity-0 transition-all transition-discrete;
+    }
+    > article {
+      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
+      @apply transition-all scale-95;
+
+      > header {
+        @apply flex items-center border-b px-3 gap-2;
+
+        svg {
+          @apply size-4 shrink-0 opacity-50;
+        }
+        input {
+          @apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
+        }
+      }
+      [role='listbox'] {
+        @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
+
+        [role='option'] {
+          @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+
+          &.active {
+            @apply bg-accent text-accent-foreground;
+          }
+        }
+        [role='heading'] {
+          @apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
+        }
+        [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
+          @apply hidden;
+        }
+        [role='separator'] {
+          @apply border-border -mx-1;
+        }
+        &:not(:has([data-value]:not([aria-hidden='true'])))::before {
+          @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
+        }
+        &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+          @apply content-[attr(data-empty)];
+        }
+        &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+          @apply content-['No_results_found'];
+        }
+      }
+    }
+    &:not([data-command-initialized]) [role='option'] {
+      @apply hover:bg-accent hover:text-accent-foreground;
+    }
+  }
+}
+
 /* Dialog */
 @layer components {
   .dialog {
@@ -576,6 +655,14 @@
   }
 }
 
+/* Kbd */
+@layer components {
+  kbd {
+    @apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;
+    /* [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 */
+  }
+}
+
 /* Label */
 @layer components {
   .form label,
@@ -1036,6 +1123,8 @@
 
 /* Tooltip */
 @layer components {
+  
+
   [data-tooltip] {
     @apply relative;