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

## class: `Dropdown`, `btu-dropdown`

### Superclass

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

### Mixins

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

### Fields

| Name               | Privacy | Type                                     | Default          | Description                                                                                                                                   | Inherited From |
| ------------------ | ------- | ---------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `label`            |         | `string`                                 | `''`             | Trigger button text.                                                                                                                          |                |
| `open`             |         | `boolean`                                | `false`          | Panel visibility state. Can be set programmatically (e.g., for tour UIs)&#xA;— syncs to \`showPopover()\`/\`hidePopover()\` in \`updated()\`. |                |
| `placement`        |         | `Placement`                              | `'bottom-start'` | Panel placement: 'bottom-start', 'bottom-end', 'top-start', 'top-end'.                                                                        |                |
| `size`             |         | `Size`                                   | `'md'`           | Button size: 'sm', 'md', 'lg'.                                                                                                                |                |
| `disabled`         |         | `boolean`                                | `false`          | Prevents opening.                                                                                                                             |                |
| `variant`          |         | `Variant`                                | `'secondary'`    | Button variant: 'primary', 'secondary', 'tertiary', 'primary-clear', 'secondary-clear', 'tertiary-clear'.                                     |                |
| `symbol`           |         | `string`                                 | `''`             | Lucide icon symbol for the trigger.                                                                                                           |                |
| `iconPosition`     |         | `'leading' \| 'trailing'`                | `'leading'`      | Icon position: 'leading' or 'trailing'.                                                                                                       |                |
| `iconOnly`         |         | `boolean`                                | `false`          | Hides label, shows icon only.                                                                                                                 |                |
| `stayOpenOnSelect` |         | `boolean`                                | `false`          | Keeps panel open on item click.                                                                                                               |                |
| `noChevron`        |         | `boolean`                                | `false`          | Hides the chevron icon on the trigger button.                                                                                                 |                |
| `tooltip`          |         | `string`                                 | `''`             | Tooltip text content. Set to empty string to remove the tooltip.                                                                              | TooltipMixin   |
| `tooltipPosition`  |         | `'top' \| 'bottom' \| 'left' \| 'right'` | `'top'`          | Position relative to the host element. Auto-flips when constrained by the viewport.                                                           | TooltipMixin   |
| `tooltipDelay`     |         | `number`                                 | `300`            | Show delay in milliseconds (hover trigger only).                                                                                              | TooltipMixin   |
| `tooltipOffset`    |         | `TooltipOffset \| null`                  | `null`           | Gap between host and tooltip (sm=4px, md=8px, lg=12px, xl=16px).                                                                              | TooltipMixin   |
| `tooltipNoArrow`   |         | `boolean`                                | `false`          | Hide the arrow pseudo-element.                                                                                                                | TooltipMixin   |
| `tooltipTrigger`   |         | `string`                                 | `'hover focus'`  | Space-separated trigger types: 'hover', 'focus', 'click'.                                                                                     | TooltipMixin   |
| `_onMouseLeave`    | private |                                          |                  |                                                                                                                                               | TooltipMixin   |
| `_onFocusIn`       | private |                                          |                  |                                                                                                                                               | TooltipMixin   |
| `_onFocusOut`      | private |                                          |                  |                                                                                                                                               | TooltipMixin   |
| `_onClick`         | private |                                          |                  |                                                                                                                                               | TooltipMixin   |
| `_onNativeToggle`  | private |                                          |                  |                                                                                                                                               | TooltipMixin   |
| `_onKeyDown`       | private |                                          |                  |                                                                                                                                               | TooltipMixin   |
| `_onDocumentClick` | private | `((e: MouseEvent) => void) \| null`      | `null`           |                                                                                                                                               | TooltipMixin   |

### Methods

| Name                | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `_getButtonClasses` | private | Build the button class string based on variant and size                                                                                                                                                                                                                            |                                                         | `string`  |                   |
| `_showPanel`        | private | Show the dropdown panel                                                                                                                                                                                                                                                            |                                                         | `void`    |                   |
| `_hidePanel`        | private | Hide the dropdown panel                                                                                                                                                                                                                                                            |                                                         | `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-ready`         | `CustomEvent`                                                    | Fired after first render and initialization                                   |                |
| `btu-dropdown-show`          | `CustomEvent`                                                    | Fired when the dropdown panel opens                                           |                |
| `btu-dropdown-hide`          | `CustomEvent`                                                    | Fired when the dropdown panel closes                                          |                |
| `btu-dropdown-item-select`   | `CustomEvent<{label: string, value: string, selected: boolean}>` | Fired when a menu item is activated (bubbles from btu-dropdown-item)          |                |
| `btu-dropdown-item-favorite` | `CustomEvent<{label: string, favorited: boolean}>`               | Fired when a menu item's favorite is toggled (bubbles from btu-dropdown-item) |                |

### Attributes

| Name                  | Field            | Inherited From |
| --------------------- | ---------------- | -------------- |
| `label`               | label            |                |
| `open`                | open             |                |
| `placement`           | placement        |                |
| `size`                | size             |                |
| `disabled`            | disabled         |                |
| `variant`             | variant          |                |
| `symbol`              | symbol           |                |
| `icon-position`       | iconPosition     |                |
| `icon-only`           | iconOnly         |                |
| `stay-open-on-select` | stayOpenOnSelect |                |
| `no-chevron`          | noChevron        |                |
| `tooltip`             | tooltip          | TooltipMixin   |
| `tooltipPosition`     | tooltipPosition  | TooltipMixin   |
| `tooltipDelay`        | tooltipDelay     | TooltipMixin   |
| `tooltipOffset`       | tooltipOffset    | TooltipMixin   |
| `tooltipNoArrow`      | tooltipNoArrow   | TooltipMixin   |
| `tooltipTrigger`      | tooltipTrigger   | TooltipMixin   |
| `tooltip-position`    | tooltipPosition  | TooltipMixin   |
| `tooltip-delay`       | tooltipDelay     | TooltipMixin   |
| `tooltip-offset`      | tooltipOffset    | TooltipMixin   |
| `tooltip-no-arrow`    | tooltipNoArrow   | TooltipMixin   |
| `tooltip-trigger`     | tooltipTrigger   | TooltipMixin   |

### CSS Properties

| Name                                  | Default | Description                                                   |
| ------------------------------------- | ------- | ------------------------------------------------------------- |
| `--dropdown-panel-background`         |         | Panel background color (default: white)                       |
| `--dropdown-panel-border-color`       |         | Panel border color (default: gray-200)                        |
| `--dropdown-panel-border-radius`      |         | Panel border radius (default: borderRadius.lg)                |
| `--dropdown-panel-min-width`          |         | Panel minimum width (default: max(12rem, anchor-size(width))) |
| `--dropdown-item-background`          |         | Item background color (default: transparent)                  |
| `--dropdown-item-color`               |         | Item text color (default: gray-700)                           |
| `--dropdown-item-hover-background`    |         | Item hover background (default: gray-100)                     |
| `--dropdown-item-hover-color`         |         | Item hover text color (default: gray-900)                     |
| `--dropdown-item-selected-background` |         | Selected item background (default: primary-50)                |
| `--dropdown-item-selected-color`      |         | Selected item text color (default: primary-700)               |
| `--dropdown-item-font-size`           |         | Item font size (default: fontSize.sm)                         |
| `--dropdown-divider-color`            |         | Divider line color (default: gray-200)                        |
| `--dropdown-empty-color`              |         | Empty state text color (default: gray-400)                    |

### Slots

| Name | Description                                                               |
| ---- | ------------------------------------------------------------------------- |
|      | A \`btu-dropdown-menu\` element containing \`btu-dropdown-item\` children |

<hr/>

## Exports

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