Styles the native <meter> element for scalar values like storage, scores, or password strength. Fill colour follows the low, high, and optimum attributes.

Default
Class Example
.mdst-meter 60%
.mdst-meter (min / max) 92 of 256 GB
Ranges
Attributes Example
optimum Good
sub-optimum Fair
least optimum Poor

No classes needed for colour: the browser compares value against low, high and optimum. Put optimum at the top for “higher is better” (scores, strength) or at the bottom for “lower is better” (disk usage, errors). A meter without those attributes always uses the foreground colour.

Sizes
Class Example
.mdst-meter--sm 45%
.mdst-meter 45%
.mdst-meter--lg 45%
--mdst-meter-height Custom height. Defaults to var(--mdst-space-sm)
Examples
Storage 212 of 256 GB
212 of 256 GB
Match score 92%
92%
Interactive Demo: Password Strength

This demo uses vanilla JS to set the meter’s value. The JavaScript below is not part of modest-ui, and the scoring is deliberately naive. Use a real strength library in production.

Too short
Demo source 
<input type="password" id="password" />
<meter id="strength" min="0" max="4" low="2" high="3" optimum="4" value="0"></meter>
<span id="strength-label">Too short</span>

<script>
  const input = document.querySelector("#password");
  const meter = document.querySelector("#strength");
  const label = document.querySelector("#strength-label");
  const labels = ["Too short", "Weak", "Fair", "Good", "Strong"];

  input.addEventListener("input", () => {
    const pw = input.value;
    let score = 0;
    if (pw.length >= 8) score++;
    if (pw.length >= 12) score++;
    if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) score++;
    if (/\d/.test(pw) && /[^a-zA-Z0-9]/.test(pw)) score++;

    meter.value = score;
    label.textContent = labels[score];
  });
</script>
Usage
<!-- Default meter (0–1) -->
<meter class="mdst-meter" value="0.6">60%</meter>

<!-- Custom range -->
<meter class="mdst-meter" min="0" max="256" value="92">92 of 256 GB</meter>

<!-- Higher is better: colour shifts to warning / error as the value drops -->
<meter class="mdst-meter" low="0.3" high="0.7" optimum="1" value="0.5">Fair</meter>

<!-- Lower is better: colour shifts as usage climbs -->
<meter class="mdst-meter" max="256" low="160" high="224" optimum="0" value="212">212 GB</meter>

<!-- Sizes -->
<meter class="mdst-meter mdst-meter--sm" value="0.5">50%</meter>
<meter class="mdst-meter mdst-meter--lg" value="0.5">50%</meter>

<!-- Classless (inside .mdst-ui container) -->
<div class="mdst-ui">
  <meter value="0.75">75%</meter>
</div>