# Command Palette Item

## Usage

Use `CommandPaletteItem` for one non-interactive result row inside `CommandPaletteList` or `CommandPaletteGroup`. `CommandPalette` owns the composite keyboard model; standalone items expose only their explicit visual state and pointer activation.

```ts
import { CommandPaletteItem } from '@astryx-vue/core/CommandPalette'
```

### Anatomy

- **Item**: The option root that carries selection, disabled, item identity, interaction, and theme state.
- **Content**: Caller-provided non-interactive label and supporting presentation.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Keep each `value` unique within the result list so highlight, active-descendant identity, and selection resolve to the same item. |
| Do | Use non-interactive child content such as icons, descriptions, and shortcut hints; activate the option itself instead of nesting buttons or links. |
| Don't | Treat `isHighlighted` as selection. Highlight is the active keyboard result; `isSelected` represents the chosen value. |

## Examples

Common configurations, variations, and states.

### Basic

Selectable command palette items inside a CommandPaletteList, including highlighted and disabled states. Use when composing a palette manually instead of a search source.

```vue
<script setup lang="ts">
import { CommandPaletteItem, CommandPaletteList } from '@astryx-vue/core/CommandPalette'
</script>

<template>
  <CommandPaletteList>
    <CommandPaletteItem value="new-file">
      New File
    </CommandPaletteItem>
    <CommandPaletteItem is-highlighted value="open-recent">
      Open Recent
    </CommandPaletteItem>
    <CommandPaletteItem value="save-all">
      Save All
    </CommandPaletteItem>
    <CommandPaletteItem is-disabled value="publish">
      Publish (disabled)
    </CommandPaletteItem>
  </CommandPaletteList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Identity of the row. Keep it unique in the list: highlight, active-descendant, and selection all resolve through it. Required. |
| `isDisabled` | `boolean` | `false` | Blocks selection and drops the row out of the keyboard order. Sets `aria-disabled`. |
| `isHighlighted` | `boolean` | `false` | Whether this row is the active keyboard result. When omitted, the row reads the state of the surrounding `CommandPalette`. Pass it explicitly for a standalone preview. |
| `isSelected` | `boolean` | `false` | Whether this row holds the selected value in picker mode. When omitted, the row compares `value` with the palette's `v-model:value`. Sets `aria-selected`. |

## Events

- `select(value: string)`: the row was activated by pointer, Enter, or Space. Inside a `CommandPalette` the palette then writes the value and closes.

## Slots

- `default`: the row content. Keep it non-interactive; put icons, text, and shortcut hints here, not buttons or links.