Health index

import '@rhds/elements/rh-health-index/rh-health-index.js';
```

<rh-health-index grade="C" size="lg">C</rh-health-index>
```

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-surface/rh-surface.js';
import '@rhds/elements/rh-health-index/rh-health-index.js';
```

.demo {
  margin: 2rem;
  padding: 0;
  list-style: none;
  width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  & h2 {
    font-size: var(--rh-font-size-body-text-lg, 1.125rem);
    color: var(--rh-color-text-primary);
  }
  & li {
    margin: 0;
    padding: 0;
  }
  & rh-surface,
  & div {
    margin-block-end: 1rem;
  }
}
```

<rh-context-demo>
  <ul class="demo">
    <li>
      <h2>SM</h2>
      <div><rh-health-index grade="A" size="sm">A</rh-health-index></div>
      <div><rh-health-index grade="B" size="sm">B</rh-health-index></div>
      <div><rh-health-index grade="C" size="sm">C</rh-health-index></div>
      <div><rh-health-index grade="D" size="sm">D</rh-health-index></div>
      <div><rh-health-index grade="E" size="sm">E</rh-health-index></div>
      <div><rh-health-index grade="F" size="sm">F</rh-health-index></div>
    </li>
    <li>
      <h2>Default</h2>
      <div><rh-health-index grade="A">A</rh-health-index></div>
      <div><rh-health-index grade="B">B</rh-health-index></div>
      <div><rh-health-index grade="C">C</rh-health-index></div>
      <div><rh-health-index grade="D">D</rh-health-index></div>
      <div><rh-health-index grade="E">E</rh-health-index></div>
      <div><rh-health-index grade="F">F</rh-health-index></div>
    </li>
    <li>
      <h2>LG</h2>
      <div><rh-health-index grade="A" size="lg">A</rh-health-index></div>
      <div><rh-health-index grade="B" size="lg">B</rh-health-index></div>
      <div><rh-health-index grade="C" size="lg">C</rh-health-index></div>
      <div><rh-health-index grade="D" size="lg">D</rh-health-index></div>
      <div><rh-health-index grade="E" size="lg">E</rh-health-index></div>
      <div><rh-health-index grade="F" size="lg">F</rh-health-index></div>
    </li>
    <li>
      <h2>XL</h2>
      <div><rh-health-index grade="A" size="xl">A</rh-health-index></div>
      <div><rh-health-index grade="B" size="xl">B</rh-health-index></div>
      <div><rh-health-index grade="C" size="xl">C</rh-health-index></div>
      <div><rh-health-index grade="D" size="xl">D</rh-health-index></div>
      <div><rh-health-index grade="E" size="xl">E</rh-health-index></div>
      <div><rh-health-index grade="F" size="xl">F</rh-health-index></div>
    </li>
  </ul>
</rh-context-demo>
```

import '@rhds/elements/rh-health-index/rh-health-index.js';
```

section {
  display: flex;
  flex-flow: column;
  gap: var(--rh-space-lg, 16px);
}
div[role="meter"] {
  display: block;
  height: 2em;
  width: 5em;
  background: linear-gradient(90deg, blue, red);
  &::after {
    color: white;
    content: attr(aria-valuetext);
  }
}
```

<section>
  <h2>&lt;rh-health-index&gt; element</h2>
  <rh-health-index grade="A" size="sm">A</rh-health-index>
  <rh-health-index grade="B" size="sm">B</rh-health-index>
  <rh-health-index grade="C" size="sm">C</rh-health-index>
  <rh-health-index grade="D" size="md">D</rh-health-index>
  <rh-health-index grade="E" size="lg">E</rh-health-index>
  <rh-health-index grade="F" size="xl">F</rh-health-index>
</section>

<section>
  <h2>ARIA attrs for <abbr title="localization">l10n</abbr></h2>
  <rh-health-index grade="A" aria-label="בריאות מדורג מדרגות א עד ו" aria-valuetext="דרגה א" size="sm">A</rh-health-index>
</section>

<section>
  <h2>Native &gt;meter&gt; element</h2>
  <meter min="1" max="6" value="1" aria-valuetext="Grade A" aria-label="Health graded A to F"></meter>
  <meter min="1" max="6" value="2" aria-valuetext="Grade B" aria-label="Health graded A to F"></meter>
  <meter min="1" max="6" value="3" aria-valuetext="Grade C" aria-label="Health graded A to F"></meter>
  <meter min="1" max="6" value="4" aria-valuetext="Grade D" aria-label="Health graded A to F"></meter>
  <meter min="1" max="6" value="5" aria-valuetext="Grade E" aria-label="Health graded A to F"></meter>
  <meter min="1" max="6" value="6" aria-valuetext="Grade F" aria-label="Health graded A to F"></meter>
</section>

<section>
  <h2>ARIA-attributes &gt;meter&gt; element</h2>
  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade A" aria-label="Health graded A to F">A</div>
  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade B" aria-label="Health graded A to F">B</div>
  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade C" aria-label="Health graded A to F">C</div>
  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade D" aria-label="Health graded A to F">D</div>
  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade E" aria-label="Health graded A to F">E</div>
  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade F" aria-label="Health graded A to F">F</div>
</section>
```

import '@rhds/elements/rh-health-index/rh-health-index.js';
```

.demo {
  margin: 2rem;
  padding: 0;
  list-style: none;
  width: 800px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
  & h2 {
    font-size: var(--rh-font-size-body-text-lg, 1.125rem);
  }
  & li {
    display: flex;
    flex-flow: column;
    gap: var(--rh-space-lg, 16px);
    margin: 0;
    padding: 0;
  }
}
```

<ul class="demo">
  <li>
    <h2>SM</h2>
    <rh-health-index grade="A" size="sm">A</rh-health-index>
    <rh-health-index grade="B" size="sm">B</rh-health-index>
    <rh-health-index grade="C" size="sm">C</rh-health-index>
    <rh-health-index grade="D" size="sm">D</rh-health-index>
    <rh-health-index grade="E" size="sm">E</rh-health-index>
    <rh-health-index grade="F" size="sm">F</rh-health-index>
  </li>

  <li>
    <h2>Default</h2>
    <rh-health-index grade="A">A</rh-health-index>
    <rh-health-index grade="B">B</rh-health-index>
    <rh-health-index grade="C">C</rh-health-index>
    <rh-health-index grade="D">D</rh-health-index>
    <rh-health-index grade="E">E</rh-health-index>
    <rh-health-index grade="F">F</rh-health-index>
  </li>

  <li>
    <h2>LG</h2>
    <rh-health-index grade="A" size="lg">A</rh-health-index>
    <rh-health-index grade="B" size="lg">B</rh-health-index>
    <rh-health-index grade="C" size="lg">C</rh-health-index>
    <rh-health-index grade="D" size="lg">D</rh-health-index>
    <rh-health-index grade="E" size="lg">E</rh-health-index>
    <rh-health-index grade="F" size="lg">F</rh-health-index>
  </li>

  <li>
    <h2>XL</h2>
    <rh-health-index grade="A" size="xl">A</rh-health-index>
    <rh-health-index grade="B" size="xl">B</rh-health-index>
    <rh-health-index grade="C" size="xl">C</rh-health-index>
    <rh-health-index grade="D" size="xl">D</rh-health-index>
    <rh-health-index grade="E" size="xl">E</rh-health-index>
    <rh-health-index grade="F" size="xl">F</rh-health-index>
  </li>
</ul>
```