# Native widgets

Styling for native HTML widgets that don't need a wrapper class: `progress`,
`meter`, and `details`/`summary`. This is `native.css` in `@layer components`.
Write the plain element; it comes out styled.

## Progress

`<progress>` renders as a slim rounded bar on a `--bg-muted` track with an
accent fill. Cross-browser fills are handled (WebKit and Firefox).

```html
<progress value="0.6"></progress>
<progress value="30" max="100"></progress>
```

## Meter

`<meter>` renders like progress but color-codes its value by range: the optimum
range fills success-green, the sub-optimum warning-amber, and the worst range
danger-red.

```html
<meter value="0.9" low="0.3" high="0.7" optimum="1"></meter>
```

## Details / summary

`<details>` gives a native disclosure. The `<summary>` is styled with a pointer
cursor, medium weight, and a focus ring on `:focus-visible`. No class needed.
The open/close behavior is native to the browser.

```html
<details>
  <summary>Advanced options</summary>
  <p>Hidden until expanded.</p>
</details>
```