# `src/components/dropdown/DropdownItem.ts`:

## class: `DropdownItem`, `btu-dropdown-item`

### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

### Mixins

| Name                | Module                         | Package |
| ------------------- | ------------------------------ | ------- |
| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |

### Fields

| Name        | Privacy | Type                                  | Default     | Description                                    | Inherited From |
| ----------- | ------- | ------------------------------------- | ----------- | ---------------------------------------------- | -------------- |
| `label`     |         | `string`                              | `''`        | Display text for the item.                     |                |
| `type`      |         | `'default' \| 'divider' \| 'subhead'` | `'default'` | Item type: 'default', 'divider', or 'subhead'. |                |
| `symbol`    |         | `string`                              | `''`        | Lucide icon symbol.                            |                |
| `shortcut`  |         | `string`                              | `''`        | Keyboard shortcut display text.                |                |
| `value`     |         | `string`                              | `''`        | Optional data value associated with the item.  |                |
| `disabled`  |         | `boolean`                             | `false`     | Whether the item is disabled.                  |                |
| `selected`  |         | `boolean`                             | `false`     | Whether the item is selected/checked.          |                |
| `favorited` |         | `boolean`                             | `false`     | Whether the item is favorited.                 |                |
| `error`     |         | `boolean`                             | `false`     | Whether the item has an error.                 |                |

### Methods

| Name              | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ----------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `_toggleFavorite` | private | Toggle favorite state                                                                                                                                                                                                                                                              | `e: Event`                                              | `void`    |                   |
| `_handleClick`    | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`    |                   |
| `emit`            |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |

### Events

| Name                         | Type                                                             | Description                    | Inherited From |
| ---------------------------- | ---------------------------------------------------------------- | ------------------------------ | -------------- |
| `btu-dropdown-item-ready`    | `CustomEvent`                                                    | Fired after first render       |                |
| `btu-dropdown-item-select`   | `CustomEvent<{label: string, value: string, selected: boolean}>` | Fired when item is activated   |                |
| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>`               | Fired when favorite is toggled |                |

### Attributes

| Name        | Field     | Inherited From |
| ----------- | --------- | -------------- |
| `label`     | label     |                |
| `type`      | type      |                |
| `symbol`    | symbol    |                |
| `shortcut`  | shortcut  |                |
| `value`     | value     |                |
| `disabled`  | disabled  |                |
| `selected`  | selected  |                |
| `favorited` | favorited |                |
| `error`     | error     |                |

### CSS Properties

| Name                                  | Default | Description                                     |
| ------------------------------------- | ------- | ----------------------------------------------- |
| `--dropdown-item-font-size`           |         | Item font size (default: theme fontSize.sm)     |
| `--dropdown-item-color`               |         | Item text color (default: gray-700)             |
| `--dropdown-item-background`          |         | Item background color (default: transparent)    |
| `--dropdown-item-hover-background`    |         | Background on hover (default: gray-100)         |
| `--dropdown-item-hover-color`         |         | Text color on hover (default: gray-900)         |
| `--dropdown-item-selected-background` |         | Background when selected (default: primary-50)  |
| `--dropdown-item-selected-color`      |         | Text color when selected (default: primary-700) |

<hr/>

## Exports

| Kind                        | Name                | Declaration  | Module                                  | Package |
| --------------------------- | ------------------- | ------------ | --------------------------------------- | ------- |
| `js`                        | `default`           | DropdownItem | src/components/dropdown/DropdownItem.ts |         |
| `custom-element-definition` | `btu-dropdown-item` | DropdownItem | src/components/dropdown/DropdownItem.ts |         |
