# meter

The markup of every demo on <https://kuiper.oeds.it/meter/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## fields

One field of every kind this component owns, inside a real `<form>` with a submit and a reset in the footer -- so the browser's own validation, Kuiper's added validators and the `<output>` that receives the messages are all live rather than illustrated.

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
  <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="26" high="51" optimum="76" value="0"></meter><output></output></div></div>
  <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="26" high="51" optimum="76" value="25"></meter><output></output></div></div>
  <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="26" high="51" optimum="76" value="50"></meter><output></output></div></div>
  <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="26" high="51" optimum="76" value="100"></meter><output></output></div></div>
</div>
```

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: the `meter-*` ladder over 5 rungs, `xs` to `xl`.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-2@l width-1-2@xl"><div class="card"><meter class="" min="0" max="100" low="26" high="51" optimum="76" value="50"></meter></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-2@l width-1-2@xl"><div class="card"><meter class="meter-xs" min="0" max="100" low="26" high="51" optimum="76" value="50"></meter></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-2@l width-1-2@xl"><div class="card"><meter class="meter-s" min="0" max="100" low="26" high="51" optimum="76" value="50"></meter></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-2@l width-1-2@xl"><div class="card"><meter class="meter-m" min="0" max="100" low="26" high="51" optimum="76" value="50"></meter></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-2@l width-1-2@xl"><div class="card"><meter class="meter-l" min="0" max="100" low="26" high="51" optimum="76" value="50"></meter></div></div>
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-2@l width-1-2@xl"><div class="card"><meter class="meter-xl" min="0" max="100" low="26" high="51" optimum="76" value="50"></meter></div></div>
</div>
```

## meter

Varies: 25 specimens.

Shown 3 times on the page, on different grounds. The markup is
identical: the ground is a class on the panel around it.

```html
<div data-grid class="grid-xs">
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="0"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="5"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="10"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="15"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="20"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="25"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="51" optimum="75" value="30"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="35"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="26" high="50" optimum="75" value="40"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="45"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="50"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="55"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="60"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="65"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="70"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="75"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="80"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="85"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="90"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="95"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="96"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="97"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="98"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="99"></meter><output></output></div></div>
  <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-4@xl"><div class="card"><meter min="0" max="100" low="25" high="50" optimum="75" value="100"></meter><output></output></div></div>
</div>
```
