selfstore-status

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

<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 into a sentence, including the copy for every state and the button for every remedy.

The status widget, light theme — 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.

The status widget, dark theme — 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.

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`

<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).

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; how the resolution works is on wording.