STANDALONE API

Import

Import the canonical component and immutable item contract from the granular entry point.

import { NeuralMeterGroup, type NeuralMeterItem } from '@neural-ng/core/meter-group';

@Component({ imports: [NeuralMeterGroup] })

Storage composition

Every segment owns its visible label, optional Neural Icon, formatted value and assistive value text.

Signal-driven values

Replace immutable items and only the computed geometry changes. Segment transitions respect reduced motion.

Custom shared range and colors

Values are normalized against one shared range. Item colors override the six-color token palette without mutating source data.

Vertical and logical layout

Orientation, label position and label flow are independent. Start and end remain correct in RTL.

Label and value visibility

Move labels before the track, hide formatted values or remove the visible legend entirely. Hidden legends become direct accessible meter names.

Capacity clipping without data loss

When totals exceed the track, later segments use only remaining visual capacity. Their real bounded values remain available through ARIA instead of being rewritten.

Unstyled and typed slots

Structural sizing and meter semantics remain while Tailwind owns every visible choice.

MeterGroup or ProgressBar?

Meter semantics

The container is a named group. Every item uses role="meter" with bounded aria-valuemin, aria-valuemax and aria-valuenow.

Names and human values

Visible labels are connected using stable aria-labelledby IDs. With labels hidden, each meter receives a direct name. Use valueText for units or domain meaning such as “24 gigabytes used”.

Motion and RTL

Logical dimensions and positions follow document direction. Segment transitions are removed when the operating system requests reduced motion.

Inputs

NeuralMeterItem

Typed class slots

Component tokens