Cloth selector

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

<fieldset class="tui-cloth-selector" role="radiogroup" data-lamp="filament" data-weave="twill">
  <legend class="tui-cloth-selector__legend tui-label">Pager</legend>
  <div class="tui-cloth-selector__tray">
    <label class="tui-cloth-selector__tile">
      <input class="tui-cloth-selector__input" type="radio" name="pager" value="silent">
      <span class="tui-cloth-selector__face">
        <span class="tui-cloth-selector__scrim"></span>
        <span class="tui-cloth-selector__glow"></span>
        <span class="tui-cloth-selector__icon" aria-hidden="true">
          <svg class="tui-cloth-selector__g tui-cloth-selector__g--off" viewBox="0 0 16 16">…</svg>
          <svg class="tui-cloth-selector__g tui-cloth-selector__g--bloom" viewBox="0 0 16 16">…</svg>
          <svg class="tui-cloth-selector__g tui-cloth-selector__g--core" viewBox="0 0 16 16">…</svg>
        </span>
        <span class="tui-cloth-selector__word" data-t="Silent">Silent</span>
      </span>
    </label>
    <label class="tui-cloth-selector__tile">
      <input class="tui-cloth-selector__input" type="radio" name="pager" value="push" checked>
      …
    </label>
    <!-- two to six tiles -->
  </div>
</fieldset>

import { clothSelectorHTML } from '/kit/kit.mjs';   // also adds Home, End and the event

// The markup above, written for you. The icon is a kit icon by name, or your own paths on the 16 grid.
form.insertAdjacentHTML('afterbegin', clothSelectorHTML({
  name: 'pager', legend: 'Pager', value: 'push',
  options: [
    { value: 'silent', label: 'Silent', icon: 'moon' },
    { value: 'digest', label: 'Digest', icon: 'mail' },
    { value: 'push', label: 'Push', icon: 'bell' },
    { value: 'call', label: 'Call', svg: '<rect x="4.5" y="2" width="7" height="12" rx="1.6"/>' },
  ],
  lamp: 'filament',     // 'green' · 'amber' · 'red' · 'blue' · 'white' · one hex: '#6fe0c8' · or 'aurora',
                        // with aurora: { pattern: 'borealis', seed: 7 }
  weave: 'twill',       // or 'speaker'
}));

form.addEventListener('tui-cloth-select', (e) => {
  e.detail.value;   // 'push'
  e.detail.label;   // 'Push'
});
new FormData(form).get('pager');   // 'push', with or without the script

// An aurora drifts for longer than five seconds, so give it a way to stop (WCAG 2.2.2).
// The selector takes a "paused" attribute; the key is yours, a real button with aria-pressed.
// There is no built-in key. The kit hides one marked data-cs-pause under reduced motion,
// where the aurora is already one still frame.
//   <button type="button" class="tui-key tui-key--sm" aria-pressed="false" data-cs-pause>Pause</button>
const key = form.querySelector('[data-cs-pause]');
key.addEventListener('click', () => {
  const held = form.querySelector('.tui-cloth-selector').toggleAttribute('paused');   // true while held
  key.setAttribute('aria-pressed', String(held));
  key.textContent = held ? 'Resume' : 'Pause';
});

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

• It is native radios in a fieldset with role="radiogroup", named by its legend. Only the chosen radio is in the tab order, the arrow keys move and choose, a form posts one value and nothing needs a script.
• Each radio is named by its word, which is real text in the label. The icon and the two lit copies of the word are hidden from assistive technology, so the word is read once.
• Chosen is said three ways: the radio is checked, the tile sits lower, and it is lit. The light is never the only sign.
• Unlit words are more than 5:1 against the cloth in both finishes; the lit word has a shade under it so it reads over its own light.
• Focus is the kit’s 2px ring round the tile. Compact tiles are 44px square, and their word shows as a tooltip on hover and on keyboard focus.
• An aurora moves for longer than five seconds, so a page that uses one gives it a Pause key (WCAG 2.2.2): a real button with aria-pressed that toggles the paused attribute. The selector does not draw one itself.
• With reduced motion the light moves from one tile to the next at once, with no fade, and the tile drops without easing. An aurora is then one still frame; otherwise it drifts on cycles of 12 to 40 seconds, never flashes, and holds still off screen and in a hidden tab.

Each tile is a native radio inside its label, drawn by the span after it, so every state is a sibling selector on :checked and needs no script. The cloth is the lit-cloth recipe from the Cloth Fader, in its --lc-* names: a four-pixel twill tile, a heather in soft-light and the grey of the cloth, with a shading layer over everything for the fabric pulled round the edges of the block. Behind it each tile has its own lamp in three layers, all plus-lighter: a bloom scattered in the fibres, the icon blurred in the lamp’s colour, and the icon again in the pale core, masked by the weave so the fibres cross the light. The word is lit the same way, from two copies of itself in ::before and ::after whose alternative text is empty. Unlit, the icon and word are pressed in: a darker shade of the cloth on aluminium and a paler one on graphite, with a shaded upper wall and a lit lower lip. Changing the mode is an opacity transition per tile, a little slower going out than coming on, so one lamp dims as the next warms. The tile drops 1.5px and loses its skirt. Corners are concentric: an 8px tile in a 6px margin, a 14px tray. An aurora lamp is the kit’s shared field in the glow: three to five soft blobs, each a radial gradient on its own layer, drifting on the compositor, shaped by the glow’s own falloff. On graphite it is added as light. On the pale aluminium cloth added light washes to white, so its colours are lifted a fifth toward white and laid on with hard-light, which lifts the channels a colour has and deepens the others: the lit tile stays a colour and is still brighter than the unlit ones. The icon and word are lit near white, tinted by the field’s white point.