docs(command-palette): update

docs/content/3.components/command-palette.md

@@ -15,12 +15,6 @@ navigation:
 
 ## Usage
 
-Use the `v-model` directive to control the value of the CommandPalette or the `default-value` prop to set the initial value when you do not need to control its state.
-
-::note
-You can also use it without any of these and either use the `select` field on each item and/or the `@update:model-value` event to handle the selection.
-::
-
 ### Groups
 
 Use the `groups` prop as an array of objects with the following properties:
@@ -28,11 +22,17 @@ Use the `groups` prop as an array of objects with the following properties:
 - `id: string`{lang="ts-type"}
 - `label?: string`{lang="ts-type"}
 - `slot?: string`{lang="ts-type"}
-- `items?: CommandPaletteItem[]`{lang="ts-type"}
+- [`items?: CommandPaletteItem[]`{lang="ts-type"}](#items)
 - `filter?: boolean`{lang="ts-type"}
 - `postFilter?: (searchTerm: string, items: T[]) => T[]`{lang="ts-type"}
 - `highlightedIcon?: string`{lang="ts-type"}
 
+::caution
+You must provide an `id` for each group otherwise the group will be ignored.
+::
+
+### Items
+
 Each group takes some `items` as an array of objects with the following properties:
 
 - `prefix?: string`{lang="ts-type"}
@@ -43,7 +43,7 @@ Each group takes some `items` as an array of objects with the following properti
 - `chip?: ChipProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
-- `slot?: string`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
 - `select?(e?: Event): void`{lang="ts-type"}
 
 ::component-code
@@ -87,6 +87,7 @@ external:
   - groups
 class: '!p-0'
 props:
+  multiple: true
   groups:
     - id: 'actions'
       label: 'Actions'
@@ -121,19 +122,134 @@ props:
 
 ### Placeholder
 
+Use the `placeholder` prop to change the placeholder text.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  placeholder: 'Search a user...'
+  class: 'flex-1'
+---
+::
+
 ### Icon
 
+Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to `i-heroicons-magnifying-glass-20-solid`.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  icon: 'i-heroicons-user'
+  class: 'flex-1'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.search` key.
+::
+
 ### Loading
 
+Use the `loading` prop to show a loading icon on the CommandPalette.
+
+Use the `loading-icon` prop to customize this icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  loading: true
+  loadingIcon: ''
+  class: 'flex-1'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+::
+
 ### Disabled
 
+Use the `disabled` prop to disable the CommandPalette.
+
+::component-code
+---
+ignore:
+  - class
+class: '!p-0'
+props:
+  disabled: true
+  class: 'flex-1'
+---
+::
+
 ### Close
 
+Use the `close` prop to display a [Button](/components/button) to dismiss the CommandPalette.
+
+::tip
+An `update:open` event will be emitted when the close button is clicked.
+::
+
+Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+ignore:
+  - class
+  - close
+class: '!p-0'
+props:
+  close: true
+  closeIcon: ''
+  class: 'flex-1'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+::
+
+You can pass all the props of the [Button](/components/button) component to customize it.
+
+::component-code
+---
+prettier: true
+ignore:
+  - close.color
+  - close.variant
+  - class
+class: '!p-0'
+props:
+  close:
+    color: primary
+    variant: outline
+    class: 'rounded-full'
+  class: 'flex-1'
+---
+::
+
 ## Examples
 
-### Control search term
+### Control active item(s)
 
-### Control selected value
+You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the index of the item.
+
+::note
+You can also use it without any of these and either use the `select` field on each item and/or the `@update:model-value` event.
+::
+
+### Control selected item(s)
+
+### Control search term
 
 ### With fetched items
 
@@ -141,10 +257,40 @@ props:
 
 ### Within a modal
 
+You can use the CommandPalette component inside a [Modal](/components/modal)'s content.
+
+::component-example
+---
+collapse: true
+name: 'modal-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ### Within a drawer
 
+You can use the CommandPalette component inside a [Drawer](/components/drawer)'s content.
+
+::component-example
+---
+collapse: true
+name: 'drawer-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ### Within a popover
 
+You can use the CommandPalette component inside a [Popover](/components/popover)'s content.
+
+::component-example
+---
+collapse: true
+name: 'popover-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ### Listen open state
 
 ### With custom search
@@ -153,8 +299,6 @@ props:
 
 ### With custom slot
 
-### With empty slot
-
 ## API
 
 ### Props