[meter] Create Meter component

[mj12albert]

Closes: #662

Demo: https://deploy-preview-743--base-ui.netlify.app/components/react-meter/

Summary

• Does not use the meter element due to cross-browser inconsistencies, attributes like optimum actually make the VO experience worse ¹, styling is also annoying ²
• Uses the same anatomy as Progress since they are closely related
• Implements the "high/medium/low segmenting" feature from the HTML spec - the high/low props can be used to set the boundaries between the 3 segments, and sets a data-segment attribute indicating which segment the current value falls in. Due to inconsistent and incorrect browser implementations of this feature, we assume the prop value is inclusive ³
• The value of the optimum prop, in combination with segmenting, indicates which segment of the range is "preferred". If the current value is in the preferred segment, a [data-optimum] attribute is set

Footnotes

1. https://www.htmhell.dev/adventcalendar/2022/5/ ↩

2. https://scottaohara.github.io/a11y_styled_form_controls/src/meter/ ↩

3. https://www.ctrl.blog/entry/html-meter-segment-boundaries.html ↩

[mui-bot]

Netlify deploy preview

https://deploy-preview-743--base-ui.netlify.app/

Generated by 🚫 dangerJS against e7386f8