Layout
Status bar
A strip at the bottom edge with groups at the sides: the branch and the errors at the left, the mode and the encoding at the right. What stands here are readings rather than controls — they are read, though almost every one of them can be pressed.
The strip is a context, not a vocabulary: it sets the type size, the colour
and the glyph size, and whatever stands inside inherits them. A <span> is a
reading that is only read, a <button> or an <a> one that answers, and a
inst-btn--xs is a control — all three
without a class of their own.
Markup
<div class="inst-statusbar">
<button class="inst-btn inst-btn--xs inst-btn--ghost" type="button">master</button>
<span data-tone="error">
<svg class="inst-icon" aria-hidden="true"><use href="#i-close"/></svg>2 errors</span>
<span data-tone="warn">7 remarks</span>
<span class="inst-cluster-spacer"></span>
<span>Ln 1, Col 1</span>
<span>UTF-8</span>
<button class="inst-btn inst-btn--xs inst-btn--ghost" type="button">Go</button>
</div>
Contract
A reading that cannot be pressed stays a <span>. A pressable one is a real
button or a link: a response to hover appears on those alone, and that is
honesty rather than styling.
| What | Required | Why |
|---|---|---|
A <span> for what is not pressed, a <button> for what is |
yes | Hover is declared on a button and a link alone. A strip of identical <div>s lies about what will respond |
An aria-hidden on a glyph beside a number |
yes | Otherwise the "2" is read together with the contents of the SVG |
| A word or a glyph along with the tone | yes | Colour as the only carrier is forbidden: a red "2" by itself does not report that these are errors |
| One line | yes | A strip that went to two lines eats the bottom of the screen of the very tool the screen was opened for |
Accessibility
| The role | An ordinary container. A role="status" is set only on the reading that changes by itself and has to be announced — the whole strip gets no such role, otherwise every movement of the cursor is read out |
| The tap target | --control-h-xs plus the gap between neighbours. Checked by cmd/targets |
| The tone | A data-tone gives the colour, but the carrier stays the sign or the word beside it |
| Contrast | --text-secondary on --surface-sunken, above 4.5:1 in five themes. The type size is --text-2xs — the floor of the scale, and there is no size below it |
| The order of traversal | It matches the order in the markup: the left group, then the right one |
API
| Name | What it does |
|---|---|
| class | |
inst-statusbar | The strip at the bottom edge. One line in height. It styles its own readings — a <span>, an <a> or a <button> placed in it becomes one, and there is no class to remember |
inst-cluster-spacer | Everything after it goes to the far edge. The strip's own gap holds that group together, so it needs nothing of its own |
| Name | Value | What it does |
|---|---|---|
| attribute | ||
data-tone | ok · warn · error · running · neutral | The tone of a reading. It takes --tone-ink |
| Name | Value | Where from |
|---|---|---|
| variable | ||
--icon-sizeSet on a reading and inherited by the glyph | --size-icon-sm | the application sets it |
| token | ||
--control-h-xsThe area of a reading. The shape does not thicken by it | 20px | base +14: density · scale |
--text-2xsThe type size of the strip | 11px | base +4: scale |
--size-icon-smThe glyph of the strip. The usual 18 against a type size of 11 outweighs the reading | 14px | base +4: scale |
--surface-sunken | light-dark(var(--n-2), var(--n-14)) | base +1: theme |
--border-subtle | light-dark(oklch(0 0 0 / 0.07), oklch(1 0 0 / 0.06)) | one across every cell |
Why the kit works this way — the constitution · Open source under MIT, github.com/keshon/instrument