## class: `WyItem`, `wy-item`

Item with image, content and actions.
May be multi-row and interactive.

### Fields

| Name              | Type                              | Default     | Description                                                                                                                                                             | Inherited From |
| ----------------- | --------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `size`            | `"auto" \| "sm" \| "md" \| "lg"`  | `"auto"`    | Size of the item.&#xA;- \`auto\` is dynamic height.&#xA;- \`sm\` is fixed for 1 line.&#xA;- \`md\` is fixed for 1-2 lines.&#xA;- \`lg\` is fixed for 2-3 lines.         |                |
| `align`           | `"top" \| "middle" \| "bottom"`   | `"middle"`  | How to align the image/content/actions.                                                                                                                                 |                |
| `actionsPosition` | `"end" \| "bottom" \| "top"`      | `"end"`     | How to position the actions.&#xA;- \`end\` is in the middle end of the item.&#xA;- \`bottom\` is in the end of the bottom line.&#xA;- \`top\` is in the top end corner. |                |
| `rounded`         | `boolean`                         | `false`     | Display the item with roundness.                                                                                                                                        |                |
| `noPadding`       | `boolean`                         | `false`     | Display the item without padding.                                                                                                                                       |                |
| `outer`           | `boolean`                         | `false`     | Display the item using outer roundness, when placed as the outermost component.                                                                                         |                |
| `interactive`     | `boolean`                         | `false`     | Add interactive hover states, for use when the item is clickable.                                                                                                       |                |
| `selected`        | `boolean`                         | `false`     | Set the item in a selected state.                                                                                                                                       |                |
| `disabled`        | `boolean`                         | `false`     | Set the item in a disabled state and prevent interaction.                                                                                                               |                |
| `url`             | `string \| undefined`             | `undefined` | Link URL for the item.                                                                                                                                                  |                |
| `trashed`         | `boolean`                         | `false`     | Display the item in a state indicating that it has been trashed.                                                                                                        |                |
| `status`          | `"read" \| "unread" \| undefined` |             | Set the read status of the item.                                                                                                                                        |                |

### Attributes

| Name              | Field           | Inherited From |
| ----------------- | --------------- | -------------- |
| `size`            | size            |                |
| `align`           | align           |                |
| `actionsPosition` | actionsPosition |                |
| `rounded`         | rounded         |                |
| `noPadding`       | noPadding       |                |
| `outer`           | outer           |                |
| `interactive`     | interactive     |                |
| `selected`        | selected        |                |
| `disabled`        | disabled        |                |
| `url`             | url             |                |
| `trashed`         | trashed         |                |
| `status`          | status          |                |

### CSS Parts

| Name                       | Description                                                                                                                |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `wy-item`                  | The component itself.                                                                                                      |
| `wy-item-inner`            | Inner wrapper for the item.                                                                                                |
| `wy-item-inner-no-padding` | Inner wrapper without padding.                                                                                             |
| `wy-item-rounded`          | When the item wrapper is rounded.                                                                                          |
| `wy-item-rounded-outer`    | When the item wrapper is using outer roundness.                                                                            |
| `wy-item-interactive`      | When the item wrapper is using interactive hover states.                                                                   |
| `wy-item-sm`               | When the item wrapper is \`sm\` size.                                                                                      |
| `wy-item-md`               | When the item wrapper is \`md\` size.                                                                                      |
| `wy-item-lg`               | When the  item wrapper id \`lg\` size.                                                                                     |
| `wy-item-top`              | When the item wrapper content has \`top\` alignment.                                                                       |
| `wy-item-middle`           | When the item wrapper content has \`middle\` alignment.                                                                    |
| `wy-item-bottom`           | When the item wrapper content has \`bottom\` alignment.                                                                    |
| `wy-read`                  | When the item wrapper has \`read\` status.                                                                                 |
| `wy-unread`                | When the item wrapper has \`unread\` status.                                                                               |
| `wy-selected`              | When the item wrapper has \`selected\` state.                                                                              |
| `wy-disabled`              | When the item wrapper has \`disabled\` state.                                                                              |
| `wy-item-image`            | The image content section of the item wrapper. Containing the \`image\` slot.                                              |
| `wy-item-body`             | The main content section of the item wrapper. Containing the \`content\` slot.                                             |
| `wy-item-rows`             | Row layout wrapper of the item body. Contains 1-2 layout rows.                                                             |
| `wy-item-row`              | Layout row in the row layout wrapper.                                                                                      |
| `wy-item-row-first`        | The first (top-most) layout row.                                                                                           |
| `wy-item-row-second`       | Any optional second (bottom-most) layout row.                                                                              |
| `wy-item-title`            | The title section of the first layout row. Contains the \`title\` slot.                                                    |
| `wy-item-left`             | Left aligned sections of a layout row.                                                                                     |
| `wy-item-meta`             | Meta section in the end of the first layout row. Contains the \`meta\` slot.                                               |
| `wy-meta`                  | Meta styled content in the meta section.                                                                                   |
| `wy-meta-sm`               | Smaller meta styled content in the meta section.                                                                           |
| `wy-item-text`             | Text content section of the second layout row. Contains the \`text\` slot.                                                 |
| `wy-item-text-sm`          | More compact styling of the text content section used when size is \`auto\`.                                               |
| `wy-item-actions`          | Section for any actions. May be after the item body or in the end of the second layout row. Contains the \`actions\` slot. |
| `wy-item-actions-bottom`   | The actions section when placed in the second layout row.                                                                  |
| `wy-item-actions-top`      | The actions sections whe align is \`top\`ot action align is \`top\`.                                                       |

### Slots

| Name      | Description                                                               |
| --------- | ------------------------------------------------------------------------- |
| `image`   | The image in the start of the item. Typically an icon or avatar.          |
| `content` | The full content body. Contains \`title\`, \`meta\` and \`text\`.         |
| `title`   | Title of the item. Placed in top row in \`content\`.                      |
| `meta`    | Meta text for the item. Placed in the end of the top row in. \`content\`. |
| `text`    | Secondary text. Placed in the bottom row in \`content\`.                  |
| `actions` | Actions. Typically icons, buttons or dropdowns.                           |

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

### Fields

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

### Methods

| Name              | Privacy | Description                                              | Parameters             | Return | Inherited From |
| ----------------- | ------- | -------------------------------------------------------- | ---------------------- | ------ | -------------- |
| `handleLinkClick` | private | If it has an url; handles ctrl click event for the item. | `e: MouseEvent, event` |        |                |

</details>

<hr/>

## class: `WyItemList`, `wy-item-list`

Item list. Provides list layout and styling for items.

### Fields

| Name       | Type      | Default | Description                                                                          | Inherited From |
| ---------- | --------- | ------- | ------------------------------------------------------------------------------------ | -------------- |
| `outer`    | `boolean` | `false` | Add outer roundness to the list when the component is placed as outermost component. |                |
| `bordered` | `boolean` | `false` | Add border to the list.                                                              |                |
| `rounded`  | `boolean` | `false` | Add roundness to the list.                                                           |                |
| `filled`   | `boolean` | `false` | Filled background.                                                                   |                |

### Attributes

| Name       | Field    | Inherited From |
| ---------- | -------- | -------------- |
| `outer`    | outer    |                |
| `bordered` | bordered |                |
| `rounded`  | rounded  |                |
| `filled`   | filled   |                |

### CSS Parts

| Name                    | Description                  |
| ----------------------- | ---------------------------- |
| `wy-item-list`          | Regular item list.           |
| `wy-item-list-bordered` | Border styling.              |
| `wy-item-list-rounded`  | Rounded styling.             |
| `wy-item-list-outer`    | Using outer rounded styling. |
| `wy-item-list-filled`   | Using filled background.     |

### Slots

| Name | Description             |
| ---- | ----------------------- |
|      | Default slot for items. |

<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`                        | `WyItem`       | WyItem      | lib/components/ui/wy-item.ts |         |
| `custom-element-definition` | `wy-item`      | WyItem      | lib/components/ui/wy-item.ts |         |
| `js`                        | `WyItemList`   | WyItemList  | lib/components/ui/wy-item.ts |         |
| `custom-element-definition` | `wy-item-list` | WyItemList  | lib/components/ui/wy-item.ts |         |
