[WillTDA]

Adds a bar along the window's bottom to the shell, with a panel each item opens, and the card's status line on its own (#67).

The bottom bar

const shell = kit.ui.mountShell({ …, statusBar: { items: [{ id, label, live, panel: { label, width } }] } });
shell.statusBar.show(visible);                  // hidden until shown
const item = shell.statusBar.item(id);          // { button, panel, open(), close(), opened }

• A <footer class="kit-statusbar"> after the frame, under the rail and the sections: 26px, a line along its top, the tertiary background, 0.75rem text. While it shows, the frame takes the rest of the window, so nothing scrolls. Without statusBar the frame is as it was and shell.statusBar is null.
• Each item is a borderless button the app fills, washed in the accent when hovered and while open, with aria-haspopup="dialog", aria-expanded and aria-controls, named by its label and its content (aria-labelledby on both). live: true makes it a polite live region; otherwise nothing in the bar is announced.
• Its panel is a non-modal role="dialog" named by panel.label, panel.width px wide (capped to the window), 6px over its item, the kit's Close at its top right and the app's elements in item.panel. It opens on a click, Enter or Space and takes the focus. Escape, Close, Tab past its last control (or Shift+Tab before its first) close it with the focus back on the item; a click outside closes it and leaves the focus where the click put it. One panel is open at a time; show(false) closes it.
• The options, show(), item() and open() (while hidden) are checked and refused with a message.

The status line

kit.ui.statusLine({ text, tone, title }) → { element, set() }: a span.kit-card-status.kit-tone-<tone> with its dot and text, the tone checked against the card's tones, the title the text unless given. card.update() now builds its line through it (a span rather than a div, drawn the same), so the two can't drift; e2e/cards.spec.js is unchanged.

The demo, tests and docs

• The demo gains a Checks item with a panel (its checks, Check Again, Show Overview), hidden by default, so the 62 existing images are unchanged.
• e2e/status-bar.spec.js: hidden until shown; under the rail and the sections, nothing scrolling; the name and expanded state; opening by click, Enter and Space; the focus in and back on each way out; one panel at a time; live only when asked; the refusals; statusLine()'s tones and refusals.
• axe on the bar and its open panel in both themes and every accent (accessibility.spec.js); the item's and the panel's focus rings at 3:1 in every accent (keyboard.spec.js).
• visual.spec.js adds the bar (its item focused by keyboard) and its open panel, in the demo's accent and the three apps', both themes: 78 images. Baselines from the hand-run job, in a commit to follow.
• test/kit-css.test.js: the panel itself is the one focusable thing drawn without a ring (it takes the focus so its name is read; its controls have rings).
• docs/shell.md gains The Bottom Bar, docs/page-components.md The Status Line, docs/development.md the new images.