# Firmware rollout
> Staged firmware rollout: one canary, then two waves, each waiting for healthy telemetry before the next; Pause holds between steps.
- Element: `<ln-firmware>`
- React: `import { LnFirmware } from "@/components/lumesec/ln-firmware"`
- Collection: Network (https://elements.lumesec.ai/components/network)
- Registry item: https://elements.lumesec.ai/r/ln-firmware.json
- Page: https://elements.lumesec.ai/components/network/firmware



Live preview: https://elements.lumesec.ai/view/ln-firmware

```html
<ln-firmware></ln-firmware>
```

## Installation

```bash
npx shadcn@latest add @lumesec/ln-firmware
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/ln-firmware.json
```

## Usage

React:

```tsx
import { LnFirmware } from "@/components/lumesec/ln-firmware";

export function Example() {
  return (
    <LnFirmware />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/ln-firmware.js"></script>

<ln-firmware></ln-firmware>
```

## Behaviour

A staged rollout: one canary, then two waves, each waiting for healthy telemetry before the next starts. Pause holds the rollout between steps.

## API reference

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event     | React prop  | Detail                                            | Description                                                                              |
| --------- | ----------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| `rollout` | `onRollout` | `{ state: "started" \| "done", version: string }` | Fires when the rollout starts and when every device runs the target version (`"7.2.0"`). |

### Methods

Call them on the element, for example through a React ref.

| Method  | Description                                                                                                                   |
| ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `run()` | Starts the rollout and returns a promise that resolves when it finishes. Same as Start rollout; ignored while a rollout runs. |

## Accessibility

* Start rollout and Pause are native buttons. Pause changes its label to Resume and has no `aria-pressed`.
* Progress messages are written to an `aria-live="polite"` line.
* Each device's state (Waiting, Downloading with a percentage, Rebooting, Up to date) is text; the lane canvas is `aria-hidden`.
* Reduced motion: traffic pixels are not drawn and each wait is cut to about 60 ms, so the rollout takes about 4 s instead of about 14 s.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--background`, `--border`, `--card`, `--foreground`, `--lumesec`, `--lumesec-success` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-border-subtle`, `--ui-fg`, `--ui-mono`, `--ui-muted`, `--ui-ok` and `--ui-surface`.

## Notes

* Shows six built-in devices in three rings (Canary, Wave 1, Wave 2) moving to 7.2.0. No attribute selects devices or version; the rollout is simulated.
* After a rollout finishes, Start rollout is enabled again; another run repeats the rollout for every ring.
* Uses a container query: below 460px the version column hides.
* The React wrapper's `ref` is typed as the element (`LnFirmwareElement`), so `run()` can be called on it once the element is connected.