Molecule

Key row

A row you read, inside a list you choose from. 21 instances on 1 screen, node 0.5, the keyboard map: 17 of the base form and 4 of --set.

It stands in optlist and it is not an opt. That distinction is why this file exists rather than a variant being added over there, and it is the same one stage 08 made when it split state out of chip: an opt is a link with four states because choosing a reason is something the analyst does, and every row here is inert by the screen’s own first sentence, “every key below is inert right now”. Seventeen unanswerable rows inside a component whose file says it is a link would have flipped a fifth of that component’s population into a lie.

So optlist has two fillings and still is not a pattern. One container, two sets of zones. That is the anatomy rule of stage 08 one rung up, which is what stage 09 calls a pattern, and it stops short of being one on the threshold stage 09 set: a pattern needs three screens and both fillings stand on two.

Anatomy

dark, shipped

↑↓Move the selection. The pane follows, so reading costs nothing.shown on: the list foot in the queuethe list has focus
1to6Pick what Clerk got wrong. One selection, one key.shown on: each reason row in the reject dialogthe reject dialog has focus and no text field does
noneEach of the three has a destination and no key bound to it.shown on: nowhere yetalways, and it is a pointer

light, the pair

↑↓Move the selection. The pane follows, so reading costs nothing.shown on: the list foot in the queuethe list has focus
1to6Pick what Clerk got wrong. One selection, one key.shown on: each reason row in the reject dialogthe reject dialog has focus and no text field does
noneEach of the three has a destination and no key bound to it.shown on: nowhere yetalways, and it is a pointer

Behaviour on width. None, and the screen is the reason: node 0.5 hangs its dialog in a scrim--desk-only, so at 360 the map is not rendered at all and the page says so in a line of its own. A component that never meets the narrow width has nothing to say about it.

Variants

AxisValueUsesThe rule
formbase17a key and what it does. Reference, and the row is answerable by nothing
--set4the other half of the map: not a key you press but the control that decides whether the keys fire at all, off or behind a modifier. It drops the key cell and the scope cell and grows a native select. Centred rather than on the baseline, and that is the only difference in the box: a row whose right hand item is a control aligns to the control
emphasisno values–Prohibited. No row on this map is more important than another. It is grouped by what a key does, and inside a group the order is the order you would learn them in

--set, and it is where the product’s only select lives

dark, shipped

Every single character shortcuta   m   r   e   1 to 6   ?
This map?

light, the pair

Every single character shortcuta   m   r   e   1 to 6   ?
This map?

Whole set and per group, never per key. A keymap bent one key at a time is a support burden across the whole console. The select keeps the native control rather than being drawn, because a drawn select has to reimplement the popup, the keyboard and the screen reader, and gets one of the three right. Until stage 12 it was the one value of input’s axis with no coloured rendering anywhere.

When to use it

On the keyboard map, and nowhere else so far. It is the row shape for a list of things the analyst reads that sit inside the same bordered stack as things she chooses. If a second screen ever lists facts in that stack, this is the row.

Where she meets it. Twice: in the first week, learning the console, and again months later to check one key she half remembers. Both readings are scans down the left hand column, which is what fixes the key cell’s width.

Rule and anti-rule

Do

aAccept Clerk’s verdict as filed.shown on: the Accept control in the panea case is in the pane

Every row says when the key is live, because a key that fires while you are typing a rejection reason is a trap rather than a shortcut.

Do not

Never an opt. It lights under the pointer and takes a focus ring, which promises that pressing it does something. Nothing on this map is answerable, and the map says so in its first line.

Limits

States

It has none, and that is the component. Point at any row and nothing happens. The one thing that can be operated is the select on the --set form, and that carries its own states as an input.

dark, shipped

↑↓Move the selection. The pane follows, so reading costs nothing.shown on: the list foot in the queuethe list has focus
1to6Pick what Clerk got wrong. One selection, one key.shown on: each reason row in the reject dialogthe reject dialog has focus and no text field does
noneEach of the three has a destination and no key bound to it.shown on: nowhere yetalways, and it is a pointer

light, the pair

↑↓Move the selection. The pane follows, so reading costs nothing.shown on: the list foot in the queuethe list has focus
1to6Pick what Clerk got wrong. One selection, one key.shown on: each reason row in the reject dialogthe reject dialog has focus and no text field does
noneEach of the three has a destination and no key bound to it.shown on: nowhere yetalways, and it is a pointer

The dashed key is a variant of the atom, not a state of the row. key--none means nothing is bound here and the absence is a decision, which is a different claim from a row that left the cell empty. It also absorbed a second one-off: the grey map declared the dashed key in the key cell and the same drawing again for the inline nowhere yet marker, in two rules that compute to one thing. Two of that screen’s eleven one-off classes were one variant of an atom that already existed.

What it reads, and where it stands

RoleSurfaceWhere on the componentDarkLight
--text-secondaryink 4.5:1ksep, kwhere, kscope, and the dashed key
--line-separatorline, exemptthe hairline under every row but the last

Two roles, and the row paints nothing else. The label takes the ink of whatever holds it, the key is its own atom drawing its boundary from currentColor, and the border of the list belongs to optlist.

Copy this

<div class="optlist"> <div class="keyrow"> <span class="keys"><span class="key">1</span><span class="ksep">to</span><span class="key">6</span></span> <span class="lbl">Pick what Clerk got wrong.<span class="kwhere">shown on: each reason row</span></span> <span class="kscope">the reject dialog has focus</span> </div> <div class="keyrow keyrow--set"> <span class="lbl">This map<span class="kwhere">?</span></span> <select class="input"><option>On, the letter alone</option></select> </div> </div>

Where it stands