# swc-meter

A meter is a non-focusable, read-only bar that displays a value inside a fixed range. The WAI-ARIA `meter` role lives on the shadow `.swc-LinearProgress` wrapper; the host carries no ARIA role.

```js
import '@adobe/spectrum-wc/components/meter/index.js';
// <swc-meter></swc-meter>
```

## Attributes

| Name               | Type                                     | Default         | Description                                                                                                                                                                         |
| ------------------ | ---------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variant`          | `MeterVariant`                           | `'informative'` | The variant of the meter. Drives the bar fill color.                                                                                                                                |
| `value`            | `number`                                 | `0`             | Current value. Sanitized via `clampedValue` for rendering and `aria-valuenow`.                                                                                                      |
| `min-value`        | `number`                                 | `0`             | Bottom of the value range.                                                                                                                                                          |
| `max-value`        | `number`                                 | `100`           | Top of the value range.                                                                                                                                                             |
| `accessible-label` | `string`                                 | `''`            | Rare-case accessible-name fallback used when there is no visible `label` slot content (for example, a data grid of meters). Renders into `aria-label` on the role element when set. |
| `value-label`      | `string \| undefined`                    | -               | Custom value text (e.g. `"1 of 4"`). Overrides the auto-formatted value in both rendered text and `aria-valuetext`.                                                                 |
| `label-position`   | `LinearProgressLabelPosition`            | `'top'`         | Position of the label relative to the bar.                                                                                                                                          |
| `static-color`     | `LinearProgressStaticColor \| undefined` | -               | Static color override for use on images or colored backgrounds.                                                                                                                     |
| `size`             | `ElementSize`                            | -               | The size of the meter.                                                                                                                                                              |

## Slots

| Name          | Description                                                                                                                                        |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`       | Visible label for the meter. Referenced via `aria-labelledby` on the shadow `meter` role element.                                                  |
| `description` | Additional description text below the meter. Referenced via `aria-describedby` on the shadow `meter` role element when assigned nodes are present. |

## CSS Custom Properties

| Name                                | Description                                                                                                                            |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| `--swc-linear-progress-fill-color`  | Color of the bar fill. Defaults to the accent content color token; each semantic variant overrides it with its own visual color token. |
| `--swc-linear-progress-track-color` | Color of the bar track. Defaults to the track color token.                                                                             |
| `--swc-linear-progress-text-color`  | Color of the label and value text. Defaults to the neutral subdued content color token.                                                |
| `--swc-linear-progress-thickness`   | Block size of the track and fill. Defaults to the size-specific progress bar thickness token.                                          |
| `--swc-linear-progress-font-size`   | Font size of the label and value text. Defaults to the size-specific font size token.                                                  |
| `--swc-linear-progress-top-to-text` | Spacing between the bar and the text. Defaults to the size-specific component top-to-text token.                                       |