# Dropdown select

Component. Use for a choice being made in UI: a rounded trigger that fills the host, whose background slides down onto the chosen item when the list opens and saturates to the highlight colour with a check mark, while the trigger label greys and the other items sit out of focus below. Closes with the chosen label in the trigger. Fade the surroundings yourself for depth of field.

## Mount

Fills its host box: give the host element the size and position you want, the component sizes everything in container units (percent of the host). No fixed canvas.

```html
<div data-composition-id="dropdown-select" data-composition-src="compositions/dropdown-select.html"
     data-start="0" data-duration="3" data-track-index="2"
     data-variable-values='{ "...": "..." }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>
```

## Slots

No HTML slot; content comes from variables.

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `label` | string | content | `Select brand` | Up to 30 characters | Text before a choice. |
| `items` | string | content | `Launchable|New brand` | Up to 200 characters | Pipe separated options in order. |
| `chosen` | number | content | `0` | 0 through 20 | Zero based index of the option picked. |
| `openAt` | number | timing | `0.4` | 0 through 30 | Seconds until the list opens. |
| `closeAt` | number | timing | `2.1` | -1 through 30 | Seconds until it closes. Negative keeps it open. |
| `highlight` | color | style | `#ff7ad9` | Hex or `transparent` | Colour the selection saturates to. |
| `idle` | color | style | `#f0edf0` | Hex or `transparent` | Trigger background before selection. |
| `zoom` | number | motion | `1.1` | 1 through 1.5 | Scale the group grows to while open. |
| `ink` | color | style | `#1a1418` | Hex or `transparent` | Text colour. |
| `font` | font | style | `"Instrument Serif",Georgia,serif` | CSS font-family stack | Display face. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

`index.html` is a demo host at 1920 by 1080; `compositions/dropdown-select.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["dropdown-select"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.