# `src/components/switch/Switch.ts`:

## class: `Switch`, `btu-switch`

### 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 |
| --------------- | ------- | ---------------------- | ------- | ----------------------------------------------------------------------------------- | -------------- |
| `size`          |         | `'sm' \| 'md' \| 'lg'` | `'sm'`  | Controls the physical dimensions of the switch and the associated label typography. |                |
| `label`         |         | `string \| undefined`  |         | The primary text displayed next to the toggle.                                      |                |
| `description`   |         | `string \| undefined`  |         | Optional helper text or secondary information displayed below the label.            |                |
| `checked`       |         | `boolean`              | `false` | The current state of the switch (on/off).                                           |                |
| `disabled`      |         | `boolean`              | `false` | If true, the toggle is non-interactive and visually muted.                          |                |
| `name`          |         | `string \| undefined`  |         | Name of the control for form participation.                                         |                |
| `labelPosition` |         | `'start' \| 'end'`     | `'end'` | Determines if the label appears to the left or right of the switch.                 |                |
| `onIcon`        |         | `string \| undefined`  |         | Lucide icon name shown on the track when the switch is checked (on).                |                |
| `offIcon`       |         | `string \| undefined`  |         | Lucide icon name shown on the track when the switch is unchecked (off).             |                |

### Methods

| Name             | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `_onInputChange` | private |                                                                                                                                                                                                                                                                                    | `e: Event`                                              | `void`    |                   |
| `_onFocus`       | private |                                                                                                                                                                                                                                                                                    |                                                         | `void`    |                   |
| `_toggleInput`   | 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-switch-ready`  | `CustomEvent`                       | Fired after the toggle is first rendered and initialized |                |
| `btu-switch-change` | `CustomEvent<{ checked: boolean }>` | Fired when the user toggles the switch                   |                |
| `btu-switch-focus`  | `CustomEvent`                       | Fired when the component gains focus                     |                |

### Attributes

| Name             | Field         | Inherited From |
| ---------------- | ------------- | -------------- |
| `size`           | size          |                |
| `label`          | label         |                |
| `description`    | description   |                |
| `checked`        | checked       |                |
| `disabled`       | disabled      |                |
| `name`           | name          |                |
| `label-position` | labelPosition |                |
| `on-icon`        | onIcon        |                |
| `off-icon`       | offIcon       |                |

### CSS Properties

| Name                       | Default | Description                                                                         |
| -------------------------- | ------- | ----------------------------------------------------------------------------------- |
| `--switch-color-track-on`  |         | Background color when the toggle is checked (default: var(--btu-theme-primary-700)) |
| `--switch-color-track-off` |         | Background color when the toggle is unchecked (default: var(--btu-theme-gray-300))  |
| `--switch-color-knob`      |         | Color of the sliding circular handle (default: var(--btu-theme-white))              |
| `--switch-label-spacing`   |         | Distance between the switch and the text label (default: 0.75rem)                   |
| `--switch-track-width`     |         | Track width (default: sm 1.75rem, md 2.25rem, lg 2.75rem)                           |
| `--switch-track-height`    |         | Track height (default: sm 1rem, md 1.25rem, lg 1.5rem)                              |
| `--switch-knob-size`       |         | Knob diameter (default: sm 0.75rem, md 1rem, lg 1.25rem)                            |
| `--switch-knob-padding`    |         | Space between knob and track edges (default: 0.125rem)                              |
| `--switch-track-icon-size` |         | Size of the track icons (default: sm 0.5rem, md 0.625rem, lg 0.75rem)               |

<hr/>

## Exports

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