## class: `WyDropdown`, `wy-dropdown`

Dropdown button with menu.

Uses the native Popover API.
See [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).

**Used sub components**

*   [`<wy-button>`](./wy-button)
*   [`<wy-icon>`](./wy-icon)

### Fields

| Name         | Type                | Default           | Description                               | Inherited From |
| ------------ | ------------------- | ----------------- | ----------------------------------------- | -------------- |
| `directionX` | `"left" \| "right"` | `"right"`         | Horizontal direction of the menu.         |                |
| `directionY` | `"up" \| "down"`    | `"down"`          | Vertical direction of the menu.           |                |
| `icon`       | `iconNamesType`     | `"dots-vertical"` | Name of the icon for the dropdown button. |                |
| `small`      | `boolean`           | `false`           | Smaller dropdown button.                  |                |
| `disabled`   | `boolean`           | `false`           | Set disabled state.                       |                |
| `showMenu`   | `boolean`           | `false`           | Is the menu shown?                        |                |

### Events

| Name    | Type          | Description | Inherited From |
| ------- | ------------- | ----------- | -------------- |
| `close` | `CustomEvent` |             |                |

### Attributes

| Name         | Field      | Inherited From |
| ------------ | ---------- | -------------- |
| `directionX` | directionX |                |
| `directionY` | directionY |                |
| `icon`       | icon       |                |
| `small`      | small      |                |
| `disabled`   | disabled   |                |

### CSS Parts

| Name                           | Description                        |
| ------------------------------ | ---------------------------------- |
| `wy-dropdown`                  | Wrapper for the dropdown           |
| `wy-dropdown-button-container` | Container for the dropdown button. |
| `wy-dropdown-button`           | The button for the dropdown.       |
| `wy-dropdown-button-icon`      | The icon for the dropdown button.  |
| `wy-dropdown-menu`             | The menu for the dropdown.         |

### Slots

| Name             | Description                  |
| ---------------- | ---------------------------- |
|                  | Default menu items.          |
| `button-content` | The dropdown button content. |

<details><summary>Private API</summary>

### Fields

| Name                    | Privacy   | Type                   | Default                           | Description | Inherited From |
| ----------------------- | --------- | ---------------------- | --------------------------------- | ----------- | -------------- |
| `exportParts`           | protected |                        | `new ShadowPartsController(this)` |             |                |
| `buttonRef`             | private   | `Ref<Element>`         |                                   |             |                |
| `menuRef`               | private   | `Ref<HTMLSlotElement>` |                                   |             |                |
| `_documentClickHandler` | private   |                        |                                   |             |                |

### Methods

| Name                | Privacy | Description | Parameters       | Return | Inherited From |
| ------------------- | ------- | ----------- | ---------------- | ------ | -------------- |
| `handleClose`       | private |             | `e: ToggleEvent` |        |                |
| `handleClickToggle` | private |             | `e: Event`       |        |                |

</details>

<hr/>

## class: `WyDropdownItem`, `wy-dropdown-item`

Item with text and optional icon for the dropdown menu.

### Fields

| Name     | Type      | Default | Description               | Inherited From |
| -------- | --------- | ------- | ------------------------- | -------------- |
| `active` | `boolean` | `false` | Sets the state to active. |                |

### Attributes

| Name     | Field  | Inherited From |
| -------- | ------ | -------------- |
| `active` | active |                |

### CSS Parts

| Name               | Description                          |
| ------------------ | ------------------------------------ |
| `wy-dropdown-item` | The container for the dropdown item. |
| `wy-active`        | Active state for the dropdown item.  |

### Slots

| Name | Description                     |
| ---- | ------------------------------- |
|      | Default slot for icon and text. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## class: `WyDropdownOption`, `wy-dropdown-option`

Item with a selected state icon for the dropdown menu.

Defaults to a check mark as selected icon.

### Used sub components

*   [`<wy-icon>`](./wy-icon)

### Fields

| Name       | Type      | Default | Description                                            | Inherited From |
| ---------- | --------- | ------- | ------------------------------------------------------ | -------------- |
| `active`   | `boolean` | `false` | Sets the active state for the item.                    |                |
| `selected` | `boolean` | `false` | Sets selected state for the item. This shows the icon. |                |

### Attributes

| Name       | Field    | Inherited From |
| ---------- | -------- | -------------- |
| `active`   | active   |                |
| `selected` | selected |                |

### CSS Parts

| Name                      | Description                                                    |
| ------------------------- | -------------------------------------------------------------- |
| `wy-dropdown-item`        | The container for the dropdown item.                           |
| `wy-dropdown-option`      | Option styling for the dropdown item.                          |
| `wy-dropdown-option-icon` | The icon for the dropdown option.                              |
| `wy-active`               | Active state for the dropdown item.                            |
| `wy-selected`             | State when the dropdown item is the currently selected option. |

### Slots

| Name   | Description             |
| ------ | ----------------------- |
|        | Default slot for text.  |
| `icon` | Slot for selected icon. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## class: `WyDropdownDivider`, `wy-dropdown-divider`

Horizontal dropdown item divider.

### CSS Parts

| Name                  | Description       |
| --------------------- | ----------------- |
| `wy-dropdown-divider` | Horizontal ruler. |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |

</details>

<hr/>

## Exports

| Kind                        | Name                  | Declaration       | Module                           | Package |
| --------------------------- | --------------------- | ----------------- | -------------------------------- | ------- |
| `js`                        | `WyDropdown`          | WyDropdown        | lib/components/ui/wy-dropdown.ts |         |
| `custom-element-definition` | `wy-dropdown`         | WyDropdown        | lib/components/ui/wy-dropdown.ts |         |
| `js`                        | `WyDropdownItem`      | WyDropdownItem    | lib/components/ui/wy-dropdown.ts |         |
| `custom-element-definition` | `wy-dropdown-item`    | WyDropdownItem    | lib/components/ui/wy-dropdown.ts |         |
| `js`                        | `WyDropdownOption`    | WyDropdownOption  | lib/components/ui/wy-dropdown.ts |         |
| `custom-element-definition` | `wy-dropdown-option`  | WyDropdownOption  | lib/components/ui/wy-dropdown.ts |         |
| `js`                        | `WyDropdownDivider`   | WyDropdownDivider | lib/components/ui/wy-dropdown.ts |         |
| `custom-element-definition` | `wy-dropdown-divider` | WyDropdownDivider | lib/components/ui/wy-dropdown.ts |         |
