# Dropdown

## Visual Structure

```
ga-dropdown
  ├── ga-dropdown__caption (optional)
  ├── ga-dropdown__empty (optional)
  ├── ga-dropdown__spinner (optional)
  └── ga-dropdown__item [--selected|--disabled|--active]
      └── ga-dropdown__item-label
```

## Elements Hierarchy

### Core Block

- `ga-dropdown` - Main container for the entire dropdown component

### Mandatory Elements

- `ga-dropdown__item` - Individual clickable/interactive dropdown option
- `ga-dropdown__item-label` - The primary text label identifying the dropdown action

### Optional Elements

- `ga-dropdown__caption` - The heading/title of the dropdown section
- `ga-dropdown__empty` - Container for empty state content when no items are available
- `ga-dropdown__spinner` - Container for loading spinner when fetching items

### Modifiers

- `ga-dropdown__item--selected` - Indicates the currently selected dropdown item
- `ga-dropdown__item--disabled` - Styles the dropdown item as disabled/non-interactive
- `ga-dropdown__item--disabled ga-dropdown__item--selected` - Combined state for a selected but disabled item
- `ga-dropdown__item--active` - Indicates the dropdown item is currently active/focused through keyboard

## Examples

### Basic

```html
<div class="ga-dropdown">
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 1</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 2</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 3</div>
  </button>
</div>
```

### With Title

```html
<div class="ga-dropdown">
  <div class="ga-dropdown__caption">Group A</div>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 1</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 2</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 3</div>
  </button>
</div>
```

### Statuses

```html
<div class="ga-dropdown">
  <button class="ga-dropdown__item ga-dropdown__item--selected">
    <div class="ga-dropdown__item-label">Selected</div>
  </button>
  <button class="ga-dropdown__item ga-dropdown__item--active">
    <div class="ga-dropdown__item-label">Active (non focused)</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Default</div>
  </button>
  <button class="ga-dropdown__item ga-dropdown__item--disabled" disabled="">
    <div class="ga-dropdown__item-label">Disabled</div>
  </button>
  <button
    class="ga-dropdown__item ga-dropdown__item--disabled ga-dropdown__item--selected"
    disabled=""
  >
    <div class="ga-dropdown__item-label">Disabled Selected</div>
  </button>
</div>
```

### Overflow

```html
<div class="ga-dropdown">
  <div class="ga-dropdown__caption">Group A</div>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 1</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 2</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 3</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 4</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 5</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 6</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 7</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 8</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 9</div>
  </button>
  <button class="ga-dropdown__item">
    <div class="ga-dropdown__item-label">Item 10</div>
  </button>
</div>
```

### Empty

```html
<div class="ga-dropdown">
  <div class="ga-dropdown__empty">No items found</div>
</div>
```

### Spinner

```html
<div class="ga-dropdown">
  <div class="ga-dropdown__spinner">
    <div class="bg-neutral-30 h-4 w-4 rounded-full"></div>
  </div>
</div>
```