# `src/components/widget/Widget.ts`:

## class: `Widget`, `btu-widget`

### Superclass

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

### Mixins

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

### Static Fields

| Name         | Privacy | Type     | Default | Description | Inherited From |
| ------------ | ------- | -------- | ------- | ----------- | -------------- |
| `_idCounter` | private | `number` | `0`     |             |                |

### Fields

| Name                 | Privacy | Type      | Default                                                                                                                                                                                                     | Description                                                                                                                          | Inherited From |
| -------------------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `_internals`         | private |           |                                                                                                                                                                                                             |                                                                                                                                      |                |
| `heading`            |         | `string`  | `''`                                                                                                                                                                                                        | Heading text displayed in the header.                                                                                                |                |
| `collapsible`        |         | `boolean` | `false`                                                                                                                                                                                                     | Whether the widget can be collapsed/expanded.&#xA;When true, a chevron toggle button appears in the header.                          |                |
| `collapsed`          |         | `boolean` | `false`                                                                                                                                                                                                     | Whether the widget is currently collapsed.&#xA;When true, body and footer are hidden. Implies collapsible.                           |                |
| `fullscreenable`     |         | `boolean` | `false`                                                                                                                                                                                                     | Whether the widget can enter fullscreen mode.&#xA;When true, a fullscreen toggle button appears in the header.                       |                |
| `_isFullscreen`      | private | `boolean` | `false`                                                                                                                                                                                                     |                                                                                                                                      |                |
| `_collapseTooltip`   | private |           | `new TooltipController(this, { target: 'button[data-tooltip="collapse"]', text: () => (this.collapsed ? 'Expand' : 'Collapse'), position: 'bottom', noArrow: true, offset: 'sm', })`                        |                                                                                                                                      |                |
| `_fullscreenTooltip` | private |           | `new TooltipController(this, { target: 'button[data-tooltip="fullscreen"]', text: () => (this._isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'), position: 'bottom', noArrow: true, offset: 'sm', })` |                                                                                                                                      |                |
| `isFullscreen`       |         | `boolean` |                                                                                                                                                                                                             | Whether the widget is currently in fullscreen mode (read-only).&#xA;Use \`btu-widget-fullscreen-changed\` event to react to changes. |                |

### Methods

| Name   | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `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-widget-ready`              | `CustomEvent`                        | Fired after first render and redistribution |                |
| `btu-widget-collapse-changed`   | `CustomEvent<{collapsed: boolean}>`  | Fired when collapsed state changes          |                |
| `btu-widget-fullscreen-changed` | `CustomEvent<{fullscreen: boolean}>` | Fired when fullscreen state changes         |                |

### Attributes

| Name             | Field          | Inherited From |
| ---------------- | -------------- | -------------- |
| `heading`        | heading        |                |
| `collapsible`    | collapsible    |                |
| `collapsed`      | collapsed      |                |
| `fullscreenable` | fullscreenable |                |

### CSS Properties

| Name                    | Default | Description                                                   |
| ----------------------- | ------- | ------------------------------------------------------------- |
| `--widget-background`   |         | Body and footer background color (default: --btu-theme-white) |
| `--widget-border`       |         | Widget border and dividers (default: 1px solid gray-200)      |
| `--widget-border-color` |         | Color of header bottom divider (default: gray-200)            |
| `--header-background`   |         | Header background color (default: transparent)                |

### Slots

| Name       | Description                                                            |
| ---------- | ---------------------------------------------------------------------- |
|            | Default pseudo-slot: elements without slot attribute are moved to body |
| `controls` | Pseudo-slot: buttons/actions moved to header actions area              |
| `footer`   | Pseudo-slot: content moved to footer container                         |

<hr/>

## Exports

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