# Command Palette List

## Usage

Scrollable results container. Renders as a listbox standalone, and inside `CommandPalette` while selectable results exist. Contains `CommandPaletteItem` and `CommandPaletteGroup` children.

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

## Examples

Common configurations, variations, and states.

### Item States

Flat list showing the highlighted, selected, and disabled item states. Use CommandPaletteGroup to add section headings.

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

<template>
  <CommandPaletteList>
    <CommandPaletteItem value="go-home">
      Go Home
    </CommandPaletteItem>
    <CommandPaletteItem is-highlighted value="open-settings">
      Open Settings
    </CommandPaletteItem>
    <CommandPaletteItem is-selected value="view-profile">
      View Profile
    </CommandPaletteItem>
    <CommandPaletteItem is-disabled value="help">
      Help (unavailable)
    </CommandPaletteItem>
  </CommandPaletteList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `Commands` | Accessible name of the listbox. The default comes from the locale messages, so it is translated for you. |

## Slots

- `default`: the list content, usually `CommandPaletteItem` rows, with or without `CommandPaletteGroup` sections.