API reference

Here's the full contract for metrics: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial metrics in with 21 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`hub-progress · value`	`number`	`0`	Current progress value, expressed on the [0, max] scale.
`hub-progress · max`	`number`	`100`	Upper bound of the progress scale.
`hub-progress · indeterminate`	`boolean`	`false`	Renders a looping bar for work of unknown duration; drops aria-valuenow.
`hub-progress · color`	`HubMetricsColor \| undefined`	`undefined`	Optional accent driving the indicator colour: a bareword (semantic name, registered accent or CSS named colour) maps to --hub-sys-color-<name> with the word itself as the fallback, while a literal (#hex, rgb(), oklch(), var()…) is passed through unchanged. Applied inline when set; omit it to let the --hub-progress-accent token drive the accent.
`hub-progress · size`	`HubProgressSize`	`'md'`	Size token controlling the bar thickness (sm, md or lg).
`hub-progress · showValue`	`boolean`	`false`	Whether the rounded percentage is rendered next to the bar.
`hub-progress · label`	`string`	`''`	Accessible label describing what the progress bar measures.
`hub-meter · value`	`number`	`0`	Current measurement, expressed on the [min, max] scale.
`hub-meter · min`	`number`	`0`	Lower bound of the scale.
`hub-meter · max`	`number`	`1`	Upper bound of the scale.
`hub-meter · low`	`number \| undefined`	`undefined`	Upper limit of the "low" region; defaults to min when omitted.
`hub-meter · high`	`number \| undefined`	`undefined`	Lower limit of the "high" region; defaults to max when omitted.
`hub-meter · optimum`	`number \| undefined`	`undefined`	Preferred point of the range; defaults to the midpoint when omitted.
`hub-meter · label`	`string`	`''`	Accessible label naming what the gauge measures; role=meter takes its name from the author, so the meter is unnamed without it.
`hub-ring · value`	`number`	`0`	Score value, expressed as a 0..1 ratio or a 0..max figure.
`hub-ring · max`	`number`	`1`	Upper bound the value is normalized against.
`hub-ring · size`	`number \| string \| undefined`	`undefined`	Outer diameter of the ring (number is treated as px, or any CSS length string), applied inline when set. Omit it to let the --hub-ring-size token drive the diameter.
`hub-ring · thickness`	`number \| string \| undefined`	`undefined`	Stroke width of the ring (number is treated as px, or any CSS length string), applied inline when set. Omit it to let the --hub-ring-thickness token drive the stroke.
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	Optional colour thresholds recolouring the indicator by band (low/high).
`hub-ring · showValue`	`boolean`	`true`	Whether the rounded percentage is rendered in the centre.
`hub-ring · label`	`string`	`''`	Accessible label naming what the ring scores; neither the projected caption nor the centred percentage can name a role=meter.

Outputs

No outputs documented yet.

Templates

Make it yours — 1 template slots let you project custom markup.

Name	Description	Example
`hub-ring · <ng-content>`	Content projected into the ring centre as a caption, rendered alongside (or instead of) the built-in percentage. It is decoration, not a name: an element with role="meter" is named by its author, so pass the `label` input.	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }" label="Quality score">Score</hub-ring>`