Setup dial

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-setup-dial label="Set up Lode">
  <section class="tui-setup-dial__step" data-name="Account">
    <h3>Your account</h3>
    <p>Who you are, for the audit log.</p>
    <label class="tui-field"><span class="tui-label">Work email</span>
      <input class="tui-input" type="email" name="email" required></label>
  </section>
  <section class="tui-setup-dial__step" data-name="Workspace">…</section>
  <section class="tui-setup-dial__step" data-name="Invite">…</section>
  <section class="tui-setup-dial__step" data-name="Done">…</section>
</tui-setup-dial>

import '/kit/kit.mjs';   // defines <tui-setup-dial>

const dial = document.querySelector('tui-setup-dial');
dial.addEventListener('tui-step', (e) => {
  e.detail.step;    // 2
  e.detail.name;    // 'Workspace'
  e.detail.done;    // [1]
  e.detail.reach;   // 2: as far as the dial may turn
});
dial.next();        // check this step, mark it done, turn on: false if a field is wrong
dial.go(4);         // false: step 4 is locked until 2 and 3 are done

Needs kit.css and kit.mjs. How to install the kit.

• The knob is a slider from 1 to the number of steps, and says where it is in words: “Step 2 of 4, Workspace”. The arrows and Page keys turn it a step; Home goes to the first and End as far as it may.
• The marks are an ordered list and each says its state after its name: “Account, done”, “Workspace, current step”, “Invite, locked”. The current one also carries aria-current="step".
• A turn that meets the stop is said in a polite status line, in words that name the step to finish first. The knob giving a little and coming back is only a second signal.
• Next checks the step with the form’s own validity and shows the browser’s message on the first field that is wrong, so a screen reader says what is missing.
• Lamps are never alone: a done step is green and lit, the current one amber and lit, and both are said in words.
• Without the script every step is on the page, one after another, as a plain form.
• With reduced motion the knob drops into its detent with no swing and meets its stop without the bump.

Each step is a section of your own; the element moves them into a panel and builds the dial beside it with setupDialFaceHTML(). The detents are spread over the 270 degrees a program knob travels. The knob’s angle is one registered custom property, --sd-turn, so it eases into each detent with a slight overshoot. The fluting round its skirt is a repeating conic gradient that starts at that angle, under a light that does not move. The grip bar across the cap is rotated by it, and its own gradients are turned back by the same angle, so its lit edge stays toward the lamp at every step; its shadow is a drop-shadow on the cap below, which does not turn. The marks are placed round the middle with the sine and cosine of each detent, their words running away from the dial on either side. What the dial may do is pure: setupDialReach is the first step not done, and setupDialTurn stops a forward turn there and never a backward one.