[docs][autocomplete] Add persistent search icon to command palette demo

docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.module.css

@@ -115,11 +115,45 @@
   }
 }
 
-.Input {
+.InputGroup {
   box-sizing: border-box;
   position: relative;
   z-index: 1;
-  padding: 0 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 0.75rem;
+  background-color: white;
+  cursor: text;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: oklch(14.5% 0 0deg);
+  }
+
+  &:focus-within {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.InputIcon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+}
+
+.Input {
+  box-sizing: border-box;
+  padding: 0 0.75rem 0 0;
   margin: 0;
   border: none;
   width: 100%;
@@ -129,7 +163,7 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
-  background-color: white;
+  background-color: transparent;
   color: oklch(14.5% 0 0deg);
   outline: none;
 
@@ -139,7 +173,6 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    background-color: oklch(14.5% 0 0deg);
     color: white;
   }
 
@@ -150,14 +183,6 @@
       color: oklch(70.8% 0 0deg);
     }
   }
-
-  &:focus {
-    outline: 2px solid oklch(14.5% 0 0deg);
-
-    @media (prefers-color-scheme: dark) {
-      outline-color: white;
-    }
-  }
 }
 
 .ListArea {

docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/css-modules/index.tsx

@@ -27,12 +27,15 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <Autocomplete.Input
-                className={styles.Input}
-                aria-label="Search commands"
-                aria-describedby={shortcutsDescriptionId}
-                placeholder="Search for apps and commands…"
-              />
+              <Autocomplete.InputGroup className={styles.InputGroup}>
+                <MagnifyingGlassIcon className={styles.InputIcon} aria-hidden />
+                <Autocomplete.Input
+                  className={styles.Input}
+                  aria-label="Search commands"
+                  aria-describedby={shortcutsDescriptionId}
+                  placeholder="Search for apps and commands…"
+                />
+              </Autocomplete.InputGroup>
               <Dialog.Close className={styles.VisuallyHidden}>Close command palette</Dialog.Close>
 
               <ScrollArea.Root className={styles.ListArea}>
@@ -94,6 +97,25 @@ export default function ExampleAutocompleteCommandPalette() {
   );
 }
 
+function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m11 11 3.5 3.5" />
+      <circle cx="7" cy="7" r="5.5" />
+    </svg>
+  );
+}
+
 interface Item {
   value: string;
   label: string;

docs/src/app/(docs)/react/components/autocomplete/demos/command-palette/tailwind/index.tsx

@@ -31,12 +31,18 @@ export default function ExampleAutocompleteCommandPalette() {
               autoHighlight="always"
               keepHighlight
             >
-              <Autocomplete.Input
-                className="relative z-1 h-10 w-full border-0 bg-white px-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:outline-solid focus:outline-neutral-950 dark:focus:outline-white dark:bg-neutral-950 dark:text-white dark:placeholder:text-neutral-400"
-                aria-label="Search commands"
-                aria-describedby={shortcutsDescriptionId}
-                placeholder="Search for apps and commands…"
-              />
+              <Autocomplete.InputGroup className="relative z-1 flex cursor-text items-center gap-2 bg-white pl-3 focus-within:outline-2 focus-within:outline-solid focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:bg-neutral-950 dark:focus-within:outline-white">
+                <MagnifyingGlassIcon
+                  className="h-4 w-4 shrink-0 text-neutral-500 dark:text-neutral-400"
+                  aria-hidden
+                />
+                <Autocomplete.Input
+                  className="h-10 w-full border-0 bg-transparent pr-3 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:text-white dark:placeholder:text-neutral-400"
+                  aria-label="Search commands"
+                  aria-describedby={shortcutsDescriptionId}
+                  placeholder="Search for apps and commands…"
+                />
+              </Autocomplete.InputGroup>
               <Dialog.Close className="sr-only">Close command palette</Dialog.Close>
 
               <ScrollArea.Root className="relative flex max-h-[min(60dvh,24rem)] min-h-0 flex-[0_1_auto] overflow-hidden border-t border-neutral-950 dark:border-t-white">
@@ -102,6 +108,25 @@ export default function ExampleAutocompleteCommandPalette() {
   );
 }
 
+function MagnifyingGlassIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m11 11 3.5 3.5" />
+      <circle cx="7" cy="7" r="5.5" />
+    </svg>
+  );
+}
+
 interface Item {
   value: string;
   label: string;