Log pad

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-log-pad max="280" unit="characters" rows="4" max-rows="10">
  <label class="tui-label tui-log-pad__label" for="note">Handover note</label>
  <div class="tui-log-pad__pad">
    <textarea class="tui-log-pad__text" id="note" name="note" rows="4"
              aria-describedby="note-limit"></textarea>
    <div class="tui-log-pad__foot">
      <span class="tui-log-pad__limit" id="note-limit">280 characters at most</span>
      <output class="tui-lcd tui-lcd--sm tui-log-pad__meter" data-state="ok"
              data-ghost="888/888" aria-hidden="true">000/280</output>
    </div>
  </div>
  <p class="tui-log-pad__say" role="status"></p>
</tui-log-pad>

import { logPadHTML } from '/kit/kit.mjs';   // also defines <tui-log-pad>

// An empty <tui-log-pad name="note" label="Handover note" max="280"> builds the pad above for itself.
const pad = document.querySelector('tui-log-pad');
pad.textarea;            // the real <textarea>: a form posts it under its own name
pad.count;               // 112, in characters or words as the unit says
pad.refresh();           // after you set textarea.value from script
pad.addEventListener('tui-log-pad', (e) => {
  e.detail.count;        // 112
  e.detail.state;        // 'ok' | 'warn' | 'over'
});

// Over the limit the textarea is aria-invalid and its validity message is set,
// so the form will not submit until the note is back within it.
form.reportValidity();

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

• It is a real <textarea>, named by its label and posted by its form, so nothing about writing, selecting, spelling or autofill is reinvented.
• The limit is printed in words (“280 characters at most”) and attached to the textarea with aria-describedby, so it is read before anyone types. The LCD repeats the count for the eye and is hidden from assistive technology.
• Crossing the limit is said once, in a polite live region: “13 characters over. The limit is 280.” Coming back inside it is said once too. Nothing is said in between, so the pad does not talk while someone types.
• The amber and the red are second signals. Over the limit the textarea is aria-invalid and carries a validity message, so a form will not send it and says why.
• The digits on the amber and red glass are dark on a light ground: about 8:1 on amber and 5:1 on red.
• The focus ring goes round the frame, since the sheet is inside it; it uses the finish’s ring colour, which reads on the frame in both finishes.
• With reduced motion the meter changes colour at once; the pad still grows, since that is a change of size, not an animation.

The rules are the textarea’s own background: a repeating gradient exactly one line high, with background-attachment: local, so it is attached to the scrolling text and moves with it, and a margin drawn as a second, fixed layer. The line height is a pixel value shared by the text and the rules, which is what locks the two together; the script reads it to grow the pad in whole lines, from rows up to max-rows, and it scrolls after that. The frame is a raised plate with a 6px rim round a 6px sheet, so its 12px corner is concentric. The paper is the kit’s paper tokens, the same in both finishes. The LCD is the kit’s own, backlit amber and then red by two colour mixes, and its unlit segments are always the same width as the number. The counting, the state and the sentence are pure functions, tested.