# Command Palette Group

## Usage

Visual grouping with a heading label. Place inside `CommandPaletteList`.

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

## Examples

Common configurations, variations, and states.

### Basic

Command palette items organized under group headings using the composed CommandPaletteGroup form. Use to separate related commands into labeled sections.

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

<template>
  <CommandPaletteList>
    <CommandPaletteGroup heading="Navigation">
      <CommandPaletteItem value="home">
        Go to Home
      </CommandPaletteItem>
      <CommandPaletteItem value="dashboard">
        Go to Dashboard
      </CommandPaletteItem>
    </CommandPaletteGroup>
    <CommandPaletteGroup heading="Actions">
      <CommandPaletteItem value="new-file">
        New File
      </CommandPaletteItem>
      <CommandPaletteItem value="save-all">
        Save All
      </CommandPaletteItem>
    </CommandPaletteGroup>
  </CommandPaletteList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `string` | — | Visible group label. It also names the group for screen readers through `aria-label`. Required. |

## Slots

- `default`: the rows of the group, usually `CommandPaletteItem` elements.