Skip to the object
TACTILE UI

Socket Panel

An integrations section made as a panel of sockets, one per service. A connected service has its plug seated and a green lamp; press a free socket and the plug goes in with a seat, press a connected one and the panel asks, in place, whether to unplug it.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Css seat animation, Inline confirmation, Grid roving focus, Until promise lamp, Status in words, No loop at rest, Reduced motion static plugs, Finish following
Stack
Vanilla ES modules, CSS, Container queries
Needs
Nothing — no dependencies
States
9 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restSix sockets cut into a machined plate: GitHub, Slack and Postgres have a plug seated with a cable stub and a green lamp; the others show a bare jack. Nothing runs.
  2. Plugging inPress a free socket: the plug comes down from the front of the panel over 240 ms, sits with a small squash, and only then does the lamp light; socket-connect fires and the status line says it in words.
  3. ConnectingWhile the page's until() promise is pending the lamp is amber; when it resolves it turns green, when it rejects the plug comes out again and socket-fail fires.
  4. AskingPress a connected socket: the question opens in the socket's own place, not in a dialog, with Keep and Unplug; Keep has the focus and Esc takes the question back.
  5. UnpluggedUnplug confirmed: the plug pulls out, the lamp goes dark, socket-disconnect fires.
  6. KeyboardOne Tab stop for the panel; arrows move across and down the grid by the columns it has at its width, Home and End, Enter or Space to plug or ask.
  7. PhoneTwo columns of sockets at 390px, no sideways scroll.
  8. Reduced motionNo seat and no pull: the plug is there or it is not.
  9. FinishesAluminium and graphite by data-finish; the lamps are the only colour.

What it is for

The integrations section of a product that connects to other tools: which services are plugged in, and a way to plug in or unplug one without leaving the page. It is a status panel, one labelled socket per service, not a patch bay: nothing is routed. A page does the real work by listening for socket-connect (with until(promise) to hold the lamp amber while it connects, and to pop the plug out if that fails), socket-disconnect and socket-fail.

Original composition; Lode and its integrations are invented, and the services are named in text, with no logos. Built from the kit alone (00.11): DOM and CSS, no object. Faces: Geist Mono and Instrument Sans (SIL OFL 1.1).