# selfstore-status
Source: https://selfstore.dev/docs/widget-status

Reference for the status widget - one line or one dot telling the user whether their data is saved and where, with the action that fixes it when it is not.

One line: is the data saved, and where. When it is not, the same line carries
the action that fixes it.

```html
<selfstore-status id="status"></selfstore-status>
<script type="module">
  document.getElementById('status').store = store;
</script>
```

This is the smallest widget and usually the first one worth mounting: it turns
the store's [headless status](https://selfstore.dev/docs/errors) into a sentence, including the copy
for every state and the button for every remedy.

<figure class="shot">
<img class="shot__light" src="/img/widgets/status-light.webp" width="1328" height="132" loading="lazy" decoding="async" alt="The status widget, light theme" />
<img class="shot__dark" src="/img/widgets/status-dark.webp" width="1328" height="132" loading="lazy" decoding="async" alt="The status widget, dark theme" />
<figcaption>The status widget on a store that has no durable home yet: the state, and the action that fixes it. Unstyled apart from the accent: this is the widget with one CSS custom property set.</figcaption>
</figure>

## Properties

| Property | Type | Default | Notes |
| --- | --- | --- | --- |
| `store` | `StoreLike \| null` | `null` | The store, or a hand-built `FlowHost` |
| `variant` | `'row' \| 'dot'` | `'row'` | `row` is dot + text + action; `dot` is the dot alone. Also an attribute. |
| `icons` | `Record<string, string>` | `{}` | An icon per target kind, shown before the text in the `row` variant |

## Attributes

| Attribute | Values |
| --- | --- |
| `variant` | `row` (default), `dot` |

```html
<selfstore-status variant="dot"></selfstore-status>
```

The `dot` variant is for a title bar or a toolbar where a sentence does not fit.
It stays clickable - the dot is a button carrying the same action - so it is a
compression, not an amputation.

## Events

| Event | Detail | When |
| --- | --- | --- |
| `selfstore-status-action` | `{ action }` | The user pressed the remedy button |

`action` is the status action name - `choose-destination`, `download`,
`reconnect`, `unlock` - or `null`. The widget does not perform the remedy: it
tells you which one the user asked for, and your app opens the right screen (a
gate, a file picker, a password prompt).

```ts
el.addEventListener('selfstore-status-action', (e) => {
  if (e.detail.action === 'choose-destination') gate.deferred = false;
});
```

## Parts

| Part | Node |
| --- | --- |
| `status-row` | The row (also carries `row`) |
| `status-action` | The remedy button (also carries `button`) |
| `dot-button` | The dot, in the `dot` variant |
| `icon` | The destination icon |
| `title` | The state sentence |
| `sub` | The secondary line |

The dot's colour comes from the severity, through `--selfstore-ok`,
`--selfstore-warn` and `--selfstore-danger`.

## Labels

Every string is a key with a default, and the widget ships English and French. The 12 keys it owns are listed on [every label key](https://selfstore.dev/docs/widget-labels#selfstore-status); how the resolution works is on [wording](https://selfstore.dev/docs/widgets-localization).

Map of this site for a model: https://selfstore.dev/llms.txt
Every page in one file: https://selfstore.dev/llms-full.txt